0基础学Web—html基本骨架、语义化标签、非语义化标签、列表、表格、表单
- html基本骨架
- 语义化标签
- 图片属性
- a链接
- 非语义化标签
- 特殊符号
- 标签
- 列表
- 无序列表
- 结果展示
- 有序列表
- 结果展示
- 定义列表
- 结果展示
- 表格
- table属性
- tr属性
- 结果展示
- 表单
- 单标签
- form属性
- input属性
- select
- textarea
- button
- 结果展示
html基本骨架
<!-- 告诉浏览器按照h5的规范解析网页 -->
<!DOCTYPE html>
<html>
<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>网页内容
</body>
</html>
语义化标签
图片属性
src:图片路径alt:图片加载不出来的替代文字title:鼠标悬浮的图片标题width:图片宽度height:图片高度相对路径:相对于当前文件./：同级../： 回到上一级绝对途径从盘符开始
a链接
href:链接地址
target=“_blank”:打开新标签页
<body><h1>一级标题</h1><h2>二级标题</h2><h6>六级标题</h6><!-- 水平线 --><hr><p>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午</p><p>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午。</p><img src="./img/01.webp" alt="当地时间11月19日下午" title="当地时间11月19日下午" width="300"><img src="https://gips3.baidu.com/it/u=1767570488,630141960&fm=3028&app=3028&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000" alt=""><a target="_blank" href="http://www.baidu.com">百度</a><a target="_blank" href="./1-html基本骨架.html">html基本骨架</a>
</body>
非语义化标签
特殊符号
<小于
>:大于
   空格
"双引号
©版权符号+
标签
span:选中标签
br：换行标签
<body><!-- 布局盒子 --><div><p>当地时间11月19日下午<span style="color:red">当地时间11月19日下午</span>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午<br>当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午当地时间11月19日下午</p><!-- 小标签 --><!-- 下标 -->h<sub>2</sub>o<!-- 上标 -->x<sup>2</sup><em>倾斜</em><strong>加粗</strong><span>行级标签</span><div><你 好></div><div><你 好></div><div><你 好></div><div>"张三"</div><div>©版权所有</div></div>
</body>
列表
无序列表
无序列表使用 <ul> 标签定义，每个列表项使用 <li> 标签表示。无序列表通常使用圆点、方块或其他符号作为标记。
<ul><li>香蕉</li><li>苹果</li><li>橘子</li>
</ul>
结果展示
有序列表
有序列表使用 <ol> 标签定义，每个列表项也使用 <li> 标签表示。有序列表中的项目会自动编号（通常是阿拉伯数字，但也可以是罗马数字或字母）。
<ol><li>香蕉</li><li>苹果</li><li>橘子</li>
</ol>
结果展示
定义列表
定义列表使用 <dl> 标签定义，包含术语（术语描述项）和描述（术语定义项）。术语使用 <dt> 标签表示，描述使用 <dd> 标签表示。
<dl><dt>水果</dt><dd>香蕉</dd><dd>苹果</dd><dd>橘子</dd><dt>蔬菜</dt><dd>菠菜</dd><dd>荠菜</dd><dd>白菜</dd>
</dl>
结果展示
表格
table属性
border：边框大小
cellspacing:格与格的间距
width:宽
height:高
bgcolor:背景颜色
align=“center”： 相对于父元素水平居中
rules:
rows：保留行线
cols:保留列线
all:保留行列线
none:去掉行列线
tr属性
align=“center”： 文本内容水平居中
bgcolor:背景颜色
<body><div><table align="center" border="1" cellspacing="0" width="500" height="300" bgcolor="lightblue"><caption><h2>同级成绩</h2></caption><thead><tr bgcolor="blue"><th>姓名</th><th>语文</th><th>数学</th></tr></thead><tbody><tr align="center"><td>张三</td><td colspan="2">80</td></tr><tr align="center"><td>李四</td><td rowspan="2">90</td><td>86</td></tr><tr align="center"><td>王五</td><td>82</td></tr></tbody><tfoot></tfoot></table>
<br><table style="border-color:red" rules="all" cellspacing="0" width="500" height="300" bgcolor="lightblue"><thead><tr bgcolor="blue"><th>姓名</th><th>语文</th><th>数学</th></tr></thead><tbody><tr align="center"><td>张三</td><td>80</td><td>80</td></tr><tr align="center"><td>李四</td><td>90</td><td>86</td></tr><tr align="center"><td>王五</td><td>90</td><td>82</td></tr></tbody><tfoot></tfoot></table></div>
</body>
结果展示
表单
单标签
br hr input img
form属性
action: 表单提交的网络地址
method:提交方式， get post
input属性
checked:默认选中
name:表单名称
value: 接收用户输入值
type：表单类型
text:文本框
password:密码框
radio:单选框
checkbox:单选框
file:文件上传
datetime-local：日期
submit:提交按钮
image：提交按钮
button: 普通按钮
reset:重置，恢复默认设置
select
select: 下拉框
selected:默认选中
textarea
多行文本域
button
提交按钮
<body><div><form action="#" method="get">用户名: <input type="text" name="username" value="李四"> <br>密码: <input type="password" name="pwd"> <br>性别:<input type="radio" name="sex" value="1" >男<input type="radio" name="sex" value="2" checked>女<br>爱好:<input type="checkbox" name="hobbys" value="1">购物<input type="checkbox" name="hobbys" value="2" checked>编程<input type="checkbox" name="hobbys" value="3" checked>打游戏<input type="checkbox" name="hobbys" value="4">睡觉 <br>地址:<select name="address"><option value=""></option><option value="1">河南</option><option value="2" selected>河北</option><option value="3">山东</option></select> <br>上传:<input type="file" name="file" multiple> <br>出生日期:<input type="datetime-local" name="dt"> <br>评论:<textarea name="comment" cols="30" rows="10"></textarea> <br><input type="submit" value="登录"><!-- <input type="image" src="./img/01.webp"> --><button>提交</button><input type="button" value="普通按钮" onclick="alert('确定吗')"><input type="reset" ></form></div>
</body>
结果展示
