Java开发 - 尚硅谷JavaWeb学习笔记 - Part2_HTML
- 第二章 HTML&CSS
- 二、HTML
- 2.0 基础结构标签以及<head>标签内部阐述
- 举例代码：
- `<!DOCTYPE html>`
- `<html lang="en">`
- `<meta>`
- `<title>`
- 2.1 标题标签 - `<h1></h1>`到`<h6></h6>`六级标题
- 2.2 段落标签 - `<p>`
- 2.3 换行标签 - `<br>`和`<hr>`
- 2.1 ~ 2.4小总结
- 2.4 列表标签
- (1)有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征
- (2)无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- (3)嵌套列表 列表和列表之前可以签到,实现某一项内容详细展示
- 整体示例代码：
- 2.5 超链接标签
- `<a>`标签 - 点击后带有链接跳转的标签
- 总结
- 2.6 多媒体标签
- `<img>`标签 - (重点) 图片标签,用于在页面上引入图片
- `<audio>`标签 - 用于在页面上引入一段声音
- `<video>`标签 - 用于在页面上引入一段视频
- 2.7 表格标签(重点)
- 常规表格
- 语法：
- 举例代码1+效果展示
- 举例代码2+效果展示
- 单元格跨行
- 单元格跨列
- 2.8 表单标签和常见表单项标签(重点)
- （0）语法汇总：
- `<form>`标签 - 表单标签，其内部用于定义可以让用户输入信息的表单项标签
- `<input>`标签 - 主要的表单项标签，可以用于定义表单项
- 代码
- （1）单行文本框 - `type="text"`
- （2）密码框 - `type="password"`
- （3）单选框 - `type="radio"`
- （4）复选框 - `type="checkbox"`
- （5）下拉框 - `<select>`
- （6）按钮 - `type="button"或"reset"或"submit"`
- （7）隐藏域 - `type="hidden"`
- （8）多行文本框 - `<textarea>`
- （9）文件标签 - `type="file"`
- （10）整体代码示例：
- 2.9 布局相关标签
- 语法：
- 代码1+效果
- 代码2+效果
- 2.10 特殊字符
- 语法：
- 代码1+效果
- 代码2+效果
第二章 HTML&CSS
二、HTML
2.0 基础结构标签以及标签内部阐述
举例代码：
<!DOCTYPE html> <!-- 用来告诉浏览器文档使用的HTML版本。<!DOCTYPE html>是HTML5的标准声明，表示文档遵循HTML5的规范。 --> <html lang="en"> <!-- 语言设置(language) --> <head> <!-- <meta>标签是HTML中用来提供元数据（metadata）的一种标签，元数据是关于数据的数据，比如作者、日期、描述等。 --> <meta charset="UTF-8"> <!-- 字符集设置 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>是一个常用于响应式网页设计的<meta>标签， 它告诉浏览器如何控制页面的尺寸和缩放。 name=“viewport”是<meta>标签的一个属性，它表示这个<meta>标签是用来设置视口（viewport）的， 视口是浏览器用来显示网页内容的区域。 width=device-width部分设置页面的宽度跟随设备的屏幕宽度（这会根据不同的设备而变化）。 initial-scale=1.0部分设置页面加载时的初始缩放级别。 content=是<meta>标签的另一个属性，它表示视口的具体设置，比如宽度、缩放比例、是否允许用户缩放等。 --> <title>Document</title> <!-- 浏览器标签上的文字 --> </head> <body> <h1>hello vscode haha hee</h1> </body> </html>
<!DOCTYPE html>
- 用来告诉浏览器文档使用的HTML版本。
<!DOCTYPE html>是HTML5的标准声明，表示文档遵循HTML5的规范。
<html lang="en">
- 语言设置(language)
<meta>
<meta>标签是HTML中用来提供元数据（metadata）的一种标签，元数据是关于数据的数据，比如作者、日期、描述等。<meta charset="UTF-8">- 字符集设置<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name=“viewport” content=“width=device-width, initial-scale=1.0”>是一个常用于响应式网页设计的标签，它告诉浏览器如何控制页面的尺寸和缩放。name=“viewport”是<meta>标签的一个属性，它表示这个<meta>标签是用来设置视口（viewport）的，视口是浏览器用来显示网页内容的区域。content=是<meta>标签的另一个属性，它表示视口的具体设置，比如宽度、缩放比例、是否允许用户缩放等。width=device-width部分设置页面的宽度跟随设备的屏幕宽度（这会根据不同的设备而变化）。initial-scale=1.0部分设置页面加载时的初始缩放级别。
<title>
<title>Document</title>
- 浏览器标签上的文字
2.1 标题标签 - <h1></h1>到<h6></h6>六级标题
标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等
- 代码
<body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body>
- 效果
2.2 段落标签 - <p>
段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果
- 代码
<body> <p> 记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。 </p> <p> 工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。 国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算， 算力每投入1元，将带动3至4元的GDP经济增长。 </p> <p> 近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。 当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。 </p> </body>
- 效果
2.3 换行标签 - <br>和<hr>
单纯实现换行的标签是
<br>
如果想添加分隔线,可以使用<hr>标签
- 代码
<body> 工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。 <br> 国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。 <hr> 中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。 </body>
- 效果
2.1 ~ 2.4小总结
- 标题
<h1></h1>~<h6></h6?( h - headline ) - 段落
<p></p>(p - paragraph) 它会创建一个新的段落(也就是换行)，通常会在段落前后添加一些空白间距。 - 换行
<br>它会在当前位置强制换行，不会影响其他元素的布局。- (br - blank rule 空标签（即：空白的（分割）线）- 标识一个简单的换行符)
- 水平分割线
<hr>(hr - horizontal rule)
注意下面的代码：
<br/>是标准的语法，但是因为语法格式宽松，所以<br>也可以了，对于<hr>和<hr/>也同理
<p> 大家好，我是伍六七。 <br/> <br> 刚工作 3、5 年的 Java 程序猿们，在日常工作中开始得心应手，基本上没有什么问题能难倒我们。 这个时候，我们很容易陷入迷茫当中，不知道怎么继续提升自己？怎么才能进阶资深、专家、总监。 知乎上更是有这么一个问题：后端除了增删改查还有什么？ 我们今天从面试八股文和项目问题，来看这个问题的答案。 </p> <p> 大家好，我是伍六七。 <hr/> <hr> 刚工作 3、5 年的 Java 程序猿们，在日常工作中开始得心应手，基本上没有什么问题能难倒我们。 这个时候，我们很容易陷入迷茫当中，不知道怎么继续提升自己？怎么才能进阶资深、专家、总监。 知乎上更是有这么一个问题：后端除了增删改查还有什么？ 我们今天从面试八股文和项目问题，来看这个问题的答案。 </p>
2.4 列表标签
(1)有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征
- 列表标签（有序列表）
<ol></ol>- order list - 列表项标签
<li></li>- list item - 代码
<ol> <li>JAVA</li> <li>前端</li> <li>大数据</li> </ol>
- 效果
(2)无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- 列表标签
<ul></ul>- unorder list - 列表项标签
<li></li>- list item - 代码
<ul> <li>JAVASE</li> <li>JAVAEE</li> <li>数据库</li> </ul>
- 效果
(3)嵌套列表 列表和列表之前可以签到,实现某一项内容详细展示
- 代码
<ol> <li> JAVA <ul> <li>JAVASE</li> <li>JAVAEE</li> <li>数据库</li> </ul> </li> <li>前端</li> <li>大数据</li> </ol>
- 效果
整体示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 有序列表 ol - order list 无序列表 ul - unorder list 列表项 li - list item --> <!-- 有序 --> <ol> <li>数据类型</li> <li>变量</li> <li>流程控制</li> <li>函数</li> <li>面对对象</li> </ol> <!-- 无序 --> <ul> <li>Java</li> <li>C</li> <li>C#</li> <li>C++</li> python </ul> <!-- 嵌套列表 --> <ol> <li> 数据类型 <ul> <li>Java</li> <li>C</li> <li>C#</li> <li>C++</li> python </ul> </li> <li>变量 <ul> <li>Java</li> <li>C</li> python <li>C#</li> <li>C++</li> </ul> </li> <li>流程控制</li> <li>函数</li> <li>面对对象</li> </ol> </body> </html>
- 效果
2.5 超链接标签
<a>标签 - 点击后带有链接跳转的标签
href属性用于定义连接href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点href中也可以定义完整的URL
target用于定义打开的方式_blank在新窗口中打开目标资源_self在当前窗口中打开目标资源
- 代码
<body> <!-- href属性用于定义连接 href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点 href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点 href中也可以定义完整的URL target用于定义打开的方式 _blank 在新窗口中打开目标资源 _self 在当前窗口中打开目标资源 --> <a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br> <a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br> <a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br> </body>
- 效果
总结
<a></a>(a - address)href(hypertext reference)用于定义要跳转的目标资源的地址- 完整的URL - Uniform Resource Locator。例：http://www.atguigu.com/
- 相对路径 以当前资源的所在路径为出发点去找目标资源
./- 表示当前资源的所在路径，可以省略不写../- 表示当前资源的上一次路径，需要时必须显示地写出
- 绝对路径 无论当前资源在哪里，使用以固定的位置作为出发点去找目标资源
- 以
/开头
- 以
target用于定义目标资源的打开方式_self在当前窗口打开目标资源_blank开启新窗口打开目标资源
- 示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 超链接标签 a - address href - hypertext reference用于定义要跳转的目标资源的地址 1 完整的URL - Uniform Resource Locator http://www.atguigu.com/ 2 相对路径 以当前资源的所在路径为出发点去找目标资源 ./ - 表示当前资源的所在路径，可以省略不写 ../ - 表示当前资源的上一次路径，需要时必须显示地写出 3 绝对路径 无论当前资源在哪里，使用以固定的位置作为出发点去找目标资源 以'/'开头 target 用于定义目标资源的打开方式 _self 在当前窗口打开目标资源 _blank 开启新窗口打开目标资源 --> <a href="http://www.atguigu.com/" target = "_blank">尚硅谷 - 新窗口打开</a> <br/> <a href="http://www.atguigu.com/" target = "_self">尚硅谷 - 当前窗口打开</a> <br/> <!-- 相对路径 --> <a href="./02标题段落换行.html" target="_blank">相对路径 - 跳转到"02标题..."的.html文件</a> <br/> <a href="a/b/test.html" target="_blank">相对路径 - 跳转到"/a/b/test.html"的.html文件</a> <br/> <!-- 绝对路径 --> <a href="/demo1-html/a/b/test.html" target="_blank">绝对路径 - 跳转到"/a/b/test.html"的.html文件</a> </body> </html>
- 效果
2.6 多媒体标签
<img>标签 - (重点) 图片标签,用于在页面上引入图片
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- image src 定义图片的路径 (source) 1 完整的URL 2 相对路径 3 绝对路径 title 定义鼠标悬停时提示的文字 alt 定义图片加载失败时提示的文字 (alternate) --> <img src="img/1.png" width="300px" title= "尚硅谷" alt="" /> <br> <img src="img/1x.png" width="300px" title= "尚硅谷" alt="尚硅谷logo" /> <br> <img src="/demo1-html/img/1.png" title= "尚硅谷" alt="" /> </body> </html>
- 效果
<audio>标签 - 用于在页面上引入一段声音
- 代码
<!-- src 用于定义目标声音资源 autoplay 用于控制打开页面时是否自动播放 controls 用于控制是否展示控制面板 loop 用于控制是否进行循环播放 --> <audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
- 效果
<video>标签 - 用于在页面上引入一段视频
- 代码
<body> <!-- src 用于定义目标视频资源 autoplay 用于控制打开页面时是否自动播放 controls 用于控制是否展示控制面板 loop 用于控制是否进行循环播放 --> <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" /> </body>
- 效果
2.7 表格标签(重点)
常规表格
语法：
<table></table>标签 - 代表表格<thead></thead>标签 - 代表表头 可以省略不写<tbody></tbody>标签 - 代表表体 可以省略不写<tfoot></tfoot>标签 - 代表表尾 可以省略不写<tr></tr>标签 - 表格中的一行 (tr - table row)<td></td>标签 - 该行内的一个单元格 (td - table data cell)- td标签里的属性
rowspan = "6"rowspan- 在自己所在的那个行来进行从上到下的跨行"6"- 跨6行
colspan = "2"colspan- 在自己所在的那个列来进行从左到右的跨列"2"- 跨2列
- td标签里的属性
<th></th>标签 - 自带加粗和居中效果的<td></td>(th - table header cell，即，表头单元格)
举例代码1+效果展示
<h3 style="text-align: center;">员工技能竞赛评分表</h3> <table border="1px" style="width: 400px; margin: 0px auto;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> </tr> <tr> <td>2</td> <td>李小东</td></td> <td>99</td> </tr> <tr> <td>3</td> <td>王小虎</td> <td>98</td> </tr> </table>
- 展示效果
举例代码2+效果展示
- 实现快捷生成代码：
tr*3>td*3- 解释：生成3行，每行有4个单元格的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table 整张表格 thead 表头 tbody 表体 tfoot 表尾 tr - table row 表格中的一行 td - table data cell 该行中的一个单元格 th - table header cell 自带加粗居中效果的td（表头单元格） --> <h3 style="text-align: center;">员工技能竞赛评分表</h3> <table border="1px" style="margin: 0px auto; width: 500px;"> <thead> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张小明</td> <td>100</td> <td rowspan="6"> <!-- rowspan - 在自己所在的那个行来进行从上到下的跨行，"6" - 跨6行--> 前三名升职加薪 </td> </tr> <tr> <td>2</td> <td>李小黑</td> <td>99</td> </tr> <tr> <td>3</td> <td>王小东</td> <td>98</td> </tr> <tr> <!-- 快捷生成代码：tr*3>td*3 - 三行，每一行有4个单元格--> <td>总人数</td> <td colspan="2">200</td><!-- colspan - 在自己所在的那个列来进行从左到右的跨列，"2" - 跨2列--> </tr> <tr> <td>平均分</td> <td colspan="2">96</td> </tr> <tr> <td>及格率</td> <td colspan="2">80%</td> </tr> </tbody> </table> </body> </html>
- 展示效果
单元格跨行
- 通过
<td></td>里的的rowspan属性实现上下跨行 - 代码
<h3 style="text-align: center;">员工技能竞赛评分表</h3> <table border="1px" style="width: 400px; margin: 0px auto;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> <td rowspan="3"> 前三名升职加薪 </td> </tr> <tr> <td>2</td> <td>李小东</td></td> <td>99</td> </tr> <tr> <td>3</td> <td>王小虎</td> <td>98</td> </tr> </table>
- 效果
单元格跨列
- 通过
<td></td>的colspan属性实现左右的跨列 - 代码
<h3 style="text-align: center;">员工技能竞赛评分表</h3> <table border="1px" style="width: 400px; margin: 0px auto;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> <td rowspan="6"> 前三名升职加薪 </td> </tr> <tr> <td>2</td> <td>李小东</td></td> <td>99</td> </tr> <tr> <td>3</td> <td>王小虎</td> <td>98</td> </tr> <tr> <td>总人数</td> <td colspan="2">2000</td> </tr> <tr> <td>平均分</td> <td colspan="2">90</td> </tr> <tr> <td>及格率</td> <td colspan="2">80%</td> </tr> </table>
- 效果
2.8 表单标签和常见表单项标签(重点)
表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一
（0）语法汇总：
<form>标签 - 表单标签，其内部用于定义可以让用户输入信息的表单项标签
action-<form></form>标签的属性，用于定义信息或数据提交的服务器的地址- 三种方式：完整的URL、相对路径、绝对路径
method-<form></form>标签的属性，用于定义信息或数据的提交方式get- get方式- 数据会在url的后缀，以
?作为参数开始的标识，多个参数用&隔开- 参数会以键值对形式放在URL后提交
- 即：URL?key=value&key=value (key-参数名，value-参数值)
- 数据直接暴露在地址栏上，相对不安全
- 地址栏长度有限制，所以提交的数据量不大
- 地址栏上，只能是字符，不能提交文件
- 相比于post效率高一些
- 数据会在url的后缀，以
post- post方式，数据会通过请求体发送，不会在url的后缀- 参数默认不妨到URL后
- 数据不会直接暴露在地址栏上，相对安全
- 数据是单独打包通过请求体发送，提交的数据量比较大
- 请求体中，可以是字符，也可以是字节数据，可以提交文件
- 相比于get效率略低一些，但是还是很快的
<input>标签 - 主要的表单项标签，可以用于定义表单项
- 一定要定义
name属性，该属性用于明确提交时的参数名 - 可以选择性地定义
value属性，该属性用于明确提交时的实参（参数值）- 定义
value的话，说明有默认的参数值；不定义value就说明没有默认的参数值 - **注意：**有一些类型的
value属性，表示的是重命名，而非传值的功能
- 定义
type-<input/>标签的属性之一，用于定义表单项类型- type属性的属性值如下：
text- 单行普通文本框password- 密码框submit- 提交按钮reset- 重置按钮radio- 单选框：多个单选框里选其中一个 - 当多个单选框使用相同的name属性值的时候，就会有互斥的选择效果checkbox- 复选框：多个选项框中选多个选项hidden- 隐藏域：不显示在页面上，但是提交时会携带- 希望用户提交一些特定的信息，但是考虑安全问题或用户操作问题的时候，不希望该数据发生改变则用该标签
file- 文件上传框
- type属性的属性值如下：
代码
<form action="http://www.atguigu.com" method="get"> 用户名 <input type="text" name="username" /> <br> 密 码 <input type="password" name="password" /> <br> <input type="submit" value="登录" /> <input type="reset" value="重置" /> </form>
- 效果
（1）单行文本框 - type="text"
- 代码
个性签名：<input type="text" name="signal"/><br/>
- 效果
（2）密码框 - type="password"
- 代码
密码：<input type="password" name="secret"/><br/>
- 效果
（3）单选框 - type="radio"
- 代码
你的性别是： <input type="radio" name="sex" value="spring" />男 <input type="radio" name="sex" value="summer" checked="checked" />女
- 效果
- 说明
name属性相同的radio为一组，组内互斥- 当用户选择了一个
radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器 - 设置
checked="checked"属性设置默认被选中的radio - 如果属性名和属性值一样的话，可以省略属性值，只写
checked即可
（4）复选框 - type="checkbox"
- 代码
你喜欢的球队是： <input type="checkbox" name="team" value="Brazil"/>巴西 <input type="checkbox" name="team" value="German" checked/>德国 <input type="checkbox" name="team" value="France"/>法国 <input type="checkbox" name="team" value="China" checked="checked"/>中国 <input type="checkbox" name="team" value="Italian"/>意大利
- 效果
- 说明：设置
checked="checked"属性设置默认被选中的checkbox
（5）下拉框 - <select>
- 代码
你喜欢的运动是： <select name="interesting"> <option value="swimming">游泳</option> <option value="running">跑步</option> <option value="shooting" selected="selected">射击</option> <option value="skating">溜冰</option> </select>
- 效果
- 说明
- 下拉列表用到了两种标签，其中
select标签用来定义下拉列表，而option标签设置列表项。 name属性在select标签中设置，value属性在option标签中设置。option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。- 通过在
option标签中设置selected="selected"属性实现默认选中的效果。
- 下拉列表用到了两种标签，其中
（6）按钮 - type="button"或"reset"或"submit"
- 代码
- 这里的
value不是值，而是用于重命名的目的
- 这里的
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/> <button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/> <button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>
- 效果
- 说明
- 普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
- 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
- 提交按钮: 点击后提交表单
（7）隐藏域 - type="hidden"
- 代码
<input type="hidden" name="userId" value="2233"/>
- 说明
- 通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
（8）多行文本框 - <textarea>
- 代码
自我介绍：<textarea name="desc"></textarea>
- 效果
- 说明：
textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。
（9）文件标签 - type="file"
- 代码
头像:<input type="file" name="file"/>
- 效果
- 说明：不同浏览器显示的样式有微小差异
（10）整体代码示例：
- 标签中的
readonly和disable属性readonly- 只读不可改写，提交时会携带着一起提交disable- 不可选择或不可用，提交时不会携带着一起提交
- 当该属性值等于该属性名的时候，例如
checked="checked"，readonly="readonly"时，不写其值也行- 例：
<input type="text" name="pid" value="456" readonly>=<input type="text" name="pid" value="456" readonly="readonly">
- 例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 当该属性值等于该属性名的时候，例如checked="checked"，readonly="readonly"时，不写其值也行 --> <!-- readonly-只读不可改写，提交时会携带着一起提交 --> <!-- disable-不可选择或不可用，提交时不会携带着一起提交 --> <form action="08welcome.html" method="get"> <input type="hidden" name="id" value="123"> <input type="text" name="pid" value="456" readonly> <br> <input type="text" name="tid" value="789" disabled> <br> <!-- 添加表单项标签 用户输入信息的标签--> <!-- name-提交的参数名(参数值就是text里的内容)--> 用户名：<input type="text" name="username" /> <br> <!-- value-默认的参数值（password里写了的话，这个默认的value就不需要了。一般都不会写value） --> 密码：<input type="password" name="userPwd" value=""/> <br> 性别： <!-- checked-当该值为"true"或"checked"时，表示默认勾选该单选框。 当该属性值等于该属性名的时候，即checked="checked"时，不写其值也行，但是别的单选框标签里不要书写checked --> <input type="radio" name="gender" value="1" checked> 男 <input type="radio" name="gender" value="0"> 女 <br> 爱好： <!-- 加value就是为了区分提交给服务器的值是什么，不自己写的话，那提交的值就都一样了--> <input type="checkbox" name="hobby" value="1" checked>篮球 <input type="checkbox" name="hobby" value="2">足球 <input type="checkbox" name="hobby" value="3">羽毛球 <input type="checkbox" name="hobby" value="4">乒乓球 <br> 个人简介： <br> <textarea name="intro" style="width: 300px; height: 100px;" ></textarea> <br> 籍贯： <!-- 这里的默认选择不用checked，而是selected--> <select> <option value="1">京</option> <option value="2">津</option> <option value="3">冀</option> <option value="0" selected>-请选择-</option> </select> <br> 选择头像： <input type="file"> <br> <!-- value - 功能：重命名--> <input type="submit" value="登录" /> <input type="reset" value="清空" /> </form> </body> </html>
- 整体效果
2.9 布局相关标签
语法：
- CSS设置样式的时候
- 通过元素的
style属性进行设置 style="样式名:样式值;样式名:样式值;......"
- 通过元素的
<div></div>标签 俗称"块"，主要用于划分页面结构，做页面布局<div>属于块元素（<h1>~<h6>也属于块元素）- 块元素：自己独占一行的元素。
- 块元素的CSS样式的宽、高等等，往往都是不生效的
<span></span>标签 俗称"层"，主要用于划分元素范围，配合CSS做页面元素样式的修饰<span>属于行内元素- 行内元素：不会自己独占一行的元素
- 行内元素的CSS样式的宽、高等等，很多都是不生效的
- 适合将某些地方单独拎出来强调等用途
<span>、<img>、<a>都属于行内元素
代码1+效果
<div style="width: 500px; height: 400px;background-color: cadetblue;"> <div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;"> <span style="color: blueviolet;">页面开头部分</span> </div> <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;"> <span style="color: blueviolet;">页面中间部分</span> </div> <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;"> <span style="color: blueviolet;">页面结尾部分</span> </div> </div>
- 展示效果
代码2+效果
<body style="background-color:cornflowerblue; color:black;">...</body>style="background-color:cornflowerblue- 设置该网页的背景色color:black- 设置该网页的字体的颜色为黑色–>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- background-color：cornflowerbule - 设置该网页的背景色，color：black - 设置该网页的字体的颜色为黑色--> <body style="background-color:cornflowerblue; color:black;"> <!-- border:10px solid red-边框的粗细为10px、设置为实线、线的颜色为红色 --> <!-- margin:10px auto-居中、上下外边距为0、左右外边距设为自动调整--> <!-- background-color-边框内部的填充颜色--> <div style="border: 10px solid red; width: 500px; height: 200px; margin: 0px auto; background-color: antiquewhite;">123</div> <div style="border: 10px solid green; width: 500px; height: 200px; margin: 1px auto; background-color:aquamarine">456</div> <div style="border: 10px solid blue; width: 500px; height: 200px; margin: 10px auto; background-color:coral"> <!-- font-size - 字体大小，color-字体颜色，font-weight - 字体的粗细--> <span style="font-size: 30px; color: aquamarine; font-weight: bold;"> 123 </span> 456789 </div> <span style="border: 1px solid greenyellow; width: 500px; height: 100px;">555</span> </body> </html>
- 展示效果
2.10 特殊字符
对于有特殊含义的字符,需要通过转移字符来表示
语法：
代码1+效果
- 代码
<span> <br> <a href="http://www.atguigu.com">尚 硅 谷</a> <br> &amp;
- 效果
代码2+效果
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 有特殊含义的符号：字符实体 对于html代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义，例如要在网页里显示:'<'和'>' --> <h1>一级标题<h1> <hr> &gt; </body> </html>
- 效果
