Java开发 - 尚硅谷JavaWeb学习笔记 - Part2_HTML

最新推荐文章于 2024-07-31 19:38:21 发布

littleCodeLearner

最新推荐文章于 2024-07-31 19:38:21 发布

阅读量741

点赞数 12

分类专栏： java 文章标签： java 学习笔记 html html5 前端

本文链接：https://blog.csdn.net/qq_63317769/article/details/139884032

版权

java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Java开发 - 尚硅谷JavaWeb学习笔记 - Part2_HTML

第二章 HTML&CSS
- 二、HTML

第二章 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列
<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效率高一些
- post - post方式，数据会通过请求体发送，不会在url的后缀
  - 参数默认不妨到URL后
  - 数据不会直接暴露在地址栏上，相对安全
  - 数据是单独打包通过请求体发送，提交的数据量比较大
  - 请求体中，可以是字符，也可以是字节数据，可以提交文件
  - 相比于get效率略低一些，但是还是很快的

`<input>`标签 - 主要的表单项标签，可以用于定义表单项

一定要定义name属性，该属性用于明确提交时的参数名
可以选择性地定义value属性，该属性用于明确提交时的实参（参数值）
- 定义value的话，说明有默认的参数值；不定义value就说明没有默认的参数值
- **注意：**有一些类型的value属性，表示的是重命名，而非传值的功能
type - <input/>标签的属性之一，用于定义表单项类型
- type属性的属性值如下：
  - text - 单行普通文本框
  - password - 密码框
  - submit - 提交按钮
  - reset - 重置按钮
  - radio - 单选框：多个单选框里选其中一个 - 当多个单选框使用相同的name属性值的时候，就会有互斥的选择效果
  - checkbox - 复选框：多个选项框中选多个选项
  - hidden - 隐藏域：不显示在页面上，但是提交时会携带
    - 希望用户提交一些特定的信息，但是考虑安全问题或用户操作问题的时候，不希望该数据发生改变则用该标签
  - file - 文件上传框

代码

   <form action="http://www.atguigu.com" method="get">
        用户名 <input type="text" name="username" /> <br>
        密&nbsp;&nbsp;&nbsp;码 <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+效果

代码

    &lt;span&gt;  <br>
    &lt;a href="http://www.atguigu.com"&gt;尚&nbsp;硅&nbsp;谷&lt;/a&gt; <br>
    &amp;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代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义，例如要在网页里显示:'<'和'>'
-->
    &lt;h1&gt;一级标题&lt;h1&gt;
    <hr>
    &amp;gt;
    
</body>
</html>