前端基础（一.HTML）

1.HTML标签的语义化：

1. 开发人员维护方便
2. 有利于搜索引擎优化
3. 标签自带样式 css加载不出来

2.基本HTML标签：

1. <h1></h1> — <h6></h6>
2. <p></p>
3. <a></a>

   <a href="http://www.baidu.com" target="_blank">百度</a>
   

   href：打开链接地址
   target：打开新窗口(target=“中间需加入”)
4. <img>

   <img src="../image/img01.jpg" alt="这是一个鲜花图片" title="我是图片的title" style="width:200px;height:200px;" >
   

• src:路径
  • 绝对路径：…/ 或 /
  • 相对路径：http://www.baidu.com
• alt：当图片加载不出来显示图片内容
• title：鼠标划入时显示的内容

5. <ul></ul>
6. <ol></ol>
7. <li></li>
8. <div></div>
9. <span></span>
10. <i></i>

3.HTML标签的分类

1. 行级元素：多个占一行，不能设置宽高

• span
• a
• i（斜体）
• strong（加粗）

2. 块级元素：单个占一行，能设置宽高

• div
• h1—h6
• p
• ul
• ol
• li

3. 行级块元素：多个占一行，能设置宽高

• img

4.表单元素

1. 外面用包围：

<form action="http://www.xx.com"></form>

2. 标签：

<label for="username">用户名：</label>

3. 文本框：

<input id="username" type="text">

4. 密码框：

<input id="password" type="password">

5. 下拉框：

<select>
 <option value="">A</option>
	<option value="">B</option>
	<option value="">C</option>
</select>

6. 单选框：

<input type="radio" name="sex">男
<input type="radio" name="sex">女

7. 多选框 ：

<input type="checkbox" name="hobby">吃饭
<input type="checkbox" name="hobby">睡觉
<input type="checkbox" name="hobby">敲代码

8. 文本域：

<textarea></textarea>

9. 按钮：

<button>按钮</button>

10. 提交按钮：点击后跳转至表单中链接的地址

<input type="submit" value="提交按钮">

11. 表格：

• 绘制表格线：表格具体内容外面用<table></table>标签包围

<table border="1" cellspacing="0"> ... </table>

• 行：

<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
</tr>

• 列：

<tr>
	<td>李四</td>
	<td>19</td>
	<td>男</td>
</tr>

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.1.26