目录
参考网址
菜鸟教程：https://www.runoob.com/html/html-tutorial.html
w3school：https://www.w3school.com.cn/h.asp
html结构
<!DOCTYPE html> <!--<!DOCTYPE html>：文档声明类型-->
<html lang="en"> <!--根标签-->
<head> <!--网页头部标签-->
<meta charset="UTF-8"> <!--编码格式-->
<title>web-标题标签</title> <!---title:网页标题标签---->
</head>
<body> <!---body中用来写入网页内容：网页主题，可视化区域--->
这是一个网页
</body>
</html>
<!---
1、单独出现的标签，只有开始没有结束的标签叫做自闭和标签或者单标签，如<br>,<hr>,<input>,<img>
2、属性只能出现在开始标签和自闭合标签内;属性名字全部小写，属性值必须用单引或者双引包裹;通常为键值对形式出现,如属性名和属性值完全一样，直接写属性名即可
--->块级标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web-块级标签</title>
</head>
<body>
<!--
行内元素和块级元素的转换：行内元素块级元素：display:block；块级元素行内元素：display:inline;
块级标签元素的特点：
1、每组块级标签自动为一行；
2、高度，行高以及外边距和内边距都可控制（可以指定）；
3、块级标签中可以容纳内联元素和其他块元素。
常用的块级标签：
1、标题标签：h1-h6
2、段落标签：p
3、列表标签：有序列表ol(li定义列表内容)、无序列表ul(li定义列表内容)、自定义列表dl(dl声明自定义列表，dt定义列表项，dd定义列表内容)
4、块级分区（组）标签：div定义文档中的分区或节
-->
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>这是一个段落标签</p>
<!-- 列表标签：有序列表ol，快捷键ul>li*n+tab，属性：type指定标签序号的类型，start指定序号的起始值 -->
<ol type="1" start="2">姓名
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!-- 列表标签：无序列表ul，快捷键ul>li*n+tab，属性：type指定列表前面的符号（实心圆点：disc，空心圆点：circle，实心放点：square，不显示符号：none） -->
<ul type="none">城市
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<!-- 列表标签：自定义列表dl，快捷键dl>dt+dd*n -->
<dl>
<dt>天气</dt>
<dd>晴</dd>
<dd>阴</dd>
<dd>雨</dd>
<dt>星期</dt>
<dd>一</dd><dd>二</dd><dd>三</dd><dd>四</dd><dd>五</dd><dd>六</dd><dd>日</dd>
</dl>
</body>
</html>内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web-内联标签</title>
</head>
<body>
<!--
行内元素和块级元素的转换：行内元素块级元素：display:block；块级元素行内元素：display:inline;
行内标签元素的特点：
1、不会自动换行，如果要换行需要使用换行标签；
2、高，行高以及外边距和内边距不可改变，宽度就是其文字或图片宽度，不可改变；
3、内联元素只能容纳文本或者其他内联元素；
4、设置宽度width无效，设置高度height无效；
5、设置margin只有左右margin有效，上下无效；
6、设置padding只有左右padding有效，上下则无效，元素范围是增大了，但是对元素周围的内容是没影响的。
常用的内联标签：
1、图片标签：img，属性：src图片地址（网络地址或本地地址，在本地地址中如果图片和当前文件不在同一目录下，
需要使用../先切换到目标目录的同级目录下，写法：../../目标文件地址），alt图片错误显示时的提示信息，title鼠标放置在上面时的提示文本
2、文字标签：p(段落标签)、b(粗体)、i(斜体)
3、超链接标签：a，属性：href跳转地址，同img的src写法，target链接的跳转方式，除_self之外使用其他的参数
都会打开一个新的窗口，title鼠标放置在上面时的提示文本
4、内联文本分区（组）标签：span，用来组合文档中的行内元素
-->
<!-- 图片标签 -->
<img src="..\img\img1\287149.jpg" alt="图片">
<!-- 文字标签 -->
<p>段落</p>
<b>粗体</b>
<i>斜体</i>
<!-- 超链接标签 -->
<a href="..\img\img1\287149.jpg" title=鼠标滑过显示的文本 target="_self">查看图片</a>
</body>
</html>表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web-表格</title>
</head>
<body>
<!--
table标签声明表格，tr行标签，td列标签，th表头标签(默认单元格内容居中且加粗)，caption表名标签
属性：border指定表格边框；width指定宽度；height指定高度；align对齐方式；cellspacing设置单元格分割线的宽度；
cellpadding设置单元格内容与左边分割线之间的距离
-->
<table border="1" width="800" height="200" align="center" cellspacing="0" cellpadding="10">
<caption>人员信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
</tr>
<tr align="center">
<td>张三</td>
<td>24</td>
<td>湖北</td>
</tr>
<tr align="center">
<td>李四</td>
<td>23</td>
<td>江西</td>
</tr>
</table>
<!--
合并单元格：
1、先确定合并格式为跨行和跨列合并
2、跨行合并属性rowspan;跨列合并属性:colspan
3、删除多余的单元格
-->
<table border="1" width="500" height="700" align="center" cellspacing="0" cellpadding="10">
<caption>个人信息表</caption>
<tr>
<th>姓名</th>
<td></td>
<th>年龄</th>
<td></td>
<td rowspan="2">照片</td>
</tr>
<tr>
<th>籍贯</th>
<td colspan="3"></td>
</tr>
<tr>
<th rowspan="50" colspan="5">个人说明</th>
</tr>
</table>
</body>
</html>表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web—表单</title>
</head>
<body>
<!--
表格将数据信息更好的进行展示，而表单是收集用户数据，然后进行前后端的数据交互
1、常用表单标签：
form:表单域标签
input:表单中使用频率最高的标签
textarea：文本域标签
select：下拉列表标签
option：下拉列表内容标签
2、表单属性：
form中的action属性
type属性指明表单类型：text文本框
password密码框
radio单选框(要达到单选的目的，需要给单选的一组数据添加一个相同的name属性)
checkbox多选框（同radio,使用name属性将多选的需要多选的内容编到一组）
button普通按钮，需要设置value值
submit提交按钮，有默认的value值=‘提交’
reset重置按钮，有默认的value值=‘重置’
file上传文件按钮，有默认的value值=‘上传文件’
hidden隐藏域
value默认值属性，表单提交项的值
placeholder提示内容属性
name属性:区分数据来自哪个标签，表单提交项的键，与id不同，name属性是和服务器通信时使用的名字，而id属性是
浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用
checked选择框的默认值属性：checked="checked"，属性值和属性名相同时可以只写属性名
rows和cols：行和列的属性
selected下拉列表的默认值属性：selected="selected"，属性值和属性名相同时可以只写属性名
disabled="disabled"：置灰禁用
readonly="readonly":只读
action：表单上传的地址
method:表单提交的方式
-->
<form action="\" method="post">
用户名：<input type="text" placeholder="请输入用户名" name="username"><br><br>
密 码：<input type="password" placeholder="请输入密码" name="pwd"><br><br>
性 别：男<input type="radio" name="sex" checked="checked">女<input type="radio" name="sex"><br><br>
喜欢的城市：
北京<input type="checkbox" name="city" checked>
上海<input type="checkbox" name="city" checked>
成都<input type="checkbox" name="city">
西安<input type="checkbox" name="city">
南京<input type="checkbox" name="city"><br><br>
<select>
<option>请选择你喜欢的食物</option>
<option>烧烤</option>
<option>火锅</option>
<option>麻辣烫</option>
</select><br><br>
请留言：<textarea rows="10" cols="50"></textarea><br><br><br>
<input type="file"><br><br><br>
<input type="reset">
<input type="button" value="请点击">
<input type="submit">
</form>
</body>
</html>
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
