2. 浏览器能识别的标签
2.1 编码 (head)
<meta charset="UTF-8">
2.2 title (head)
<head>
<meta charset="UTF-8">
<title>宣杭机电</title>
</head>
2.3 标题 块级标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.4 div 块级标签和 span 行内标签
<div>内容</div>
<span style="color: red">山东南翔</span>
<span>挖掘机那家强</span>
div, 一个人占一整行。【块级标签】
span, 自己多大占多少。【行内标签, 内联标签】
2.4.5 超链接 行内标签
跳转到其他网站
<a href="https://hao.360.com/?a1004">点击跳转</a>
跳转到自己网站 当前页打开
<a href="/get/news">查看更多</a>
新的Tab页面打开
<a href="/get/news" target="_blank">查看更多</a>
2.4.6 图片 行内标签
<img src="图片地址">
直接显示别人的图片地址(防盗链):
<img style="height: 250px" src="https://pics2.baidu.com/feed/c2cec3fdfc039245f4acb43a784ee8c97c1e25cb.jpeg@f_auto?token=26bfb19f3f7a4d3ed2233f2bdac344db">
<img src="自己图片的地址">
显示自己的图片:
- 自己 web 目录项目中创建:static 目录,图片要放在 static
- 在页面上引入图片
<img style="width: 25%" src="/static/rBBZuF0a-BaAMoGEAAAY6yXrekc758.jpg"> # 图片的%之几,只适合width
2.4.7 列表
<ul> # 无序列表
<li>中国移动</li>
<li>中国电信</li>
<li>中国联通</li>
</ul>
<h1>运营商列表</h1>
<ol> # 有序列表
<li>中国移动</li>
<li>中国电信</li>
<li>中国联通</li>
</ol>
2.4.8 表格
<h1>数据表格</h1>
<table border="1">
<thead>
<tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
</thead>
<tbody>
<tr> <td>1</td> <td>周晓翠</td> <td>3</td> </tr>
<tr> <td>2</td> <td>颜秀</td> <td>5</td> </tr>
<tr> <td>3</td> <td>颜兵</td> <td>2</td> </tr>
</tbody>
</table>
2.4.9 input 系列 (7个)
<input type="text" name="user"> #文本/用户名
<input type="password"name="pwd"> #密码
<input type="file"> # 选择文件,做上传用
<input type="radio" name="n1">男 #性别
<input type="radio" name="n1">女
<input type="checkbox">篮球 #爱好
<input type="checkbox">足球
<input type="checkbox">棒球
<input type="button" value="提交"> # 普通按钮
<input type="submit" value="提交"> # 提交表单
2.4.10 下拉框 #本来是选一个 ,加 multiple 这个是下拉框支持多选 要按住Shift,在鼠标点击要选择的城市
<select multiple> #加 multiple 擅长邻域
<option>北京</option> #城市
<option>上海</option>
<option>深圳</option>
</select>
2.4.11 多行文本 #备注
<textarea rows="3"></textarea> # rows="3" 默认显示3行,满3行可以继续输入