前端入门基础
时间：2023-06-22 16:37:00
1、HTML基础
1.文档声明和字符编码
DOCTYPE html>：特殊固定的文档声明标签 <html lang="***">：语言声明，lang="en"代表英语，lang="zh-CN"代表中文 <meta charset="***">：字符编码声明，charset="UTF-8"表示万国码字符编码
2.常用标签
1.标题标签：h1~h6 2.段落文本：<p>段落文本内容p> 3.换行：<br>换行是空标记(强制换行)，<br/> 4.水平线：<hr>空标记 5.加粗：<strong>强调内容strong>突出文本，<b>加粗内容b>只显示加粗 6.倾斜：<em>强调文本em>，<i>倾斜文本<i> 7.删除线：<del>文本del>，<s>文本s> 8.扩展： <u>文本u>下划线 <sup>sup>上标 <sub>sub>下标
1、<常规标签>也叫双标签
<标记>标记>
<标记 属性="属性值" 属性="属性值">标记>
标记也可以叫标签或叫元素
例如：<head>head>
2、空标记也叫单标记
<标记/>
<标记 属性="属性值"/>
例如：<br/>
<hr color="red" width="300px" align="right">
<hr noshade>
color：颜色
width：宽度
align：对齐方式
noshade：取消阴影,其默认为noshade，所以可以不写noshade="noshade"
3.特殊符号
1.尖角号：< < > >
2.空格： 占据宽度正好是一个中文宽度，且基本上不受字体影响； 该空格占据宽度受字体影响
3.版权：©
4.商标：™ ™ ® ®
5.表情：㈳x x为任意数字，不同数字代表不同符号
4.div和span标签
1.div标签，没有具体含义，用来划分页面的区域，独占一行
2.span标签，没有实际意义，主要应用在对文本独立修饰的时候，内容有多宽就占多宽的空间距离
5.列表
无序列表：<ul> <li>无序li> <li>列表li> ul> 有序列表：<ol type='A' start='4'> <li>有序li> <li>列表li> ol> type 类型 start 开始自定义列表：<dl> <dt>可以是文字也可以是图dt> <dd>相关文字dd> dl>
6.图片路径与属性
路径分类：绝对路径、相对路径
1、绝对路径：是指文件在硬盘上真正存在的路径
2、相对路径：是相对于自己的目标文件位置
如同一级：<img src="img.gif"> <img src="./img.gif">
如下一级：<img src="others/img2.gif"> <img src="./others/img2.gif">
如上一级：<img src="../others/img2.gif">
属性
<img src="图片路径" title="鼠标悬停时提示信息" alt="图片加载失败的提示信息" width="200px" height"200px"/>
7.超链接
<a href="http://www.baidu.com" title="鼠标悬停后提示信息" target="规定在何处打开文档">超链接a>
Target属性：规定在何处打开文档
target=“_self” 默认值
target="_blank" 新窗口打开
8.表格标签
数据表格的创建
<table border="1" width="500" height="500" bordercolor="red" bgcolor="bule" align="center" cellspacing="5" cellpadding="50%">
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
table>
一、表格属性
1.宽度 width width：px、%(相对于父元素的百分比)
2.高度 height
3.边框 border 外边框大小
4.边框颜色 bordercolor 外边框颜色
5.背景颜色 bgcolor
6.水平对齐 align=“left/right/center”
7，sellspacing=“单元格与单元格之间的间距”
8.cellpadding=“单元格与内容之间的空隙”
二、行tr 属性
1.高度 heigt
2.背景颜色 bgcolor
3.文字水平对齐align=“left/right/center”
4.文字垂直对齐valign=“top/middle/bottom”
三、单元格td 属性
td：如果一个单元格设置宽度，影响的是这一整列的
td：如果一个单元格设置高度，影响的是这一整行的
1.宽度 width
2.高度 heigt
3.背景颜色 bgcolor
4.文字水平对齐align=“left/right/center”
5.文字垂直对齐valign=“top/middle/bottom”
四、表格合并
1.rowspan="所要合并的单元格的行数"必须给到td，行合并
rowspan=“5”
2.colspan=“所要合并的单元格的列数"必须给到td，列合并
colspan=“2”
♥案例-今日小说排行榜
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日小说排行耪title>
head>
<body>
<table align="center" width="500px" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名th>
<th>关键字th>
<th>趋势th>
<th>进入搜索th>
<th>最近七日th>
<th>相关链接th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>鬼吹灯td>
<td>uptd>
<td>345td>
<td>123td>
<td>
<a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>
td>
tr>
<tr>
<td>2td>
<td>盗墓笔记td>
<td>downtd>
<td>124td>
<td>67532td>
<td>
<a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>
td>
tr>
<tr>
<td>3td>
<td>西游记td>
<td>uptd>
<td>212td>
<td>7654td>
<td>
<a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>
td>
tr>
<tr>
<td>4td>
<td>红楼梦td>
<td>downtd>
<td>23td>
<td>75645td>
<td>
<a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>
td>
tr>
<tr>
<td>5td>
<td>甄嬛传td>
<td>downtd>
<td>121td>
<td>7676td>
<td>
<a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>
td>
tr>
<tr>
<td>6td>
<td>水浒传td>
<td>downtd>
<td>576576td>
<td>1231421td>
<td>
<a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>
td>
tr>
<tr>
<td>7td>
<td>三国演义td>
<td>uptd>
<td>234td>
<td>7686td>
<td>
<a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>
td>
tr>
tbody>
table>
body>
html>
9.表单标签
9.1表单域
<from action="url地址" method="提交方式（get/post）" name="表单域名称">
<input type="属性值" name="名称" value="">
from>
1.name和value是每个表单元素都有的属性值，主要是给后台人员使用
2.单选框和复选框都要有相同的name值
3.checked属性主要用于单选框和复选框，默认选择该项
4.maxlength输入字段中最大长度
<from> 用户名：<input type="text” name="username" value="请输入用户名" maxlenght="6"> <br> 密码：<input type="password" name="pwd"> <br> 性别：男 <input type="radio" name="sex" checked="checked"> 女 <input type="radio" name="sex"> <br> 元器件数据手册、IC替代型号，打造电子元器件IC百科大全！
