首页 前端知识 Java开发 - 尚硅谷JavaWeb学习笔记 - Part2_HTML

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

2024-08-10 22:08:21 前端知识 前端哥 202 540 我要收藏

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>
  • 效果

image.png

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>
  • 效果

1681180239241.png

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>
  • 效果

image.png

(2)无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
  • 列表标签 <ul></ul> - unorder list
  • 列表项标签 <li></li> - list item
  • 代码
<ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</li>
</ul>
  • 效果

image.png

(3)嵌套列表 列表和列表之前可以签到,实现某一项内容详细展示
  • 代码
<ol>
    <li>
        JAVA
        <ul>
            <li>JAVASE</li>
            <li>JAVAEE</li>
            <li>数据库</li>
        </ul>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>
  • 效果

image.png

整体示例代码:
<!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>
  • 效果

image.png

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>
  • 效果

image.png

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>
  • 效果

image.png

<audio>标签 - 用于在页面上引入一段声音
  • 代码
   <!-- 
    src
        用于定义目标声音资源
    autoplay
        用于控制打开页面时是否自动播放
    controls
        用于控制是否展示控制面板
    loop
        用于控制是否进行循环播放
    --> 
   <audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
  • 效果

image.png

<video>标签 - 用于在页面上引入一段视频
  • 代码
<body>
   <!-- 
    src
        用于定义目标视频资源
    autoplay
        用于控制打开页面时是否自动播放
    controls
        用于控制是否展示控制面板
    loop
        用于控制是否进行循环播放
    --> 
   <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>
  • 效果

image.png

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>
  • 展示效果

image.png

举例代码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>
  • 效果

image.png

单元格跨列
  • 通过<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>
  • 效果

image.png

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>
  • 效果

image.png

(1)单行文本框 - type="text"
  • 代码
个性签名:<input type="text" name="signal"/><br/>
  • 效果

image.png

(2)密码框 - type="password"
  • 代码
密码:<input type="password" name="secret"/><br/>
  • 效果

image.png

(3)单选框 - type="radio"
  • 代码
你的性别是:
<input type="radio" name="sex" value="spring" /><input type="radio" name="sex" value="summer" checked="checked" />
  • 效果

image.png

  • 说明
    • name属性相同的radio为一组,组内互斥
    • 当用户选择了一个radio并提交表单,这个radioname属性和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"/>意大利
  • 效果

image.png

  • 说明:设置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>
  • 效果

image.png

  • 说明
    • 下拉列表用到了两种标签,其中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="提交按钮"/>
  • 效果

image.png

  • 说明
    • 普通按钮: 点击后无效果,需要通过JavaScript绑定单击响应函数
    • 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
    • 提交按钮: 点击后提交表单
(7)隐藏域 - type="hidden"
  • 代码
<input type="hidden" name="userId" value="2233"/>
  • 说明
    • 通过表单隐藏域设置的表单项不会显示到页面上,用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据,例如:用户id等等。
(8)多行文本框 - <textarea>
  • 代码
自我介绍:<textarea name="desc"></textarea>
  • 效果

image.png

  • 说明:textarea没有value属性,如果要设置默认值需要写在开始和结束标签之间。
(9)文件标签 - type="file"
  • 代码
头像:<input type="file" name="file"/>
  • 效果

image.png

  • 说明:不同浏览器显示的样式有微小差异
(10)整体代码示例:
  • 标签中的readonlydisable属性
    • 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>
  • 整体效果

image.png

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>
  • 展示效果

image.png

代码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>
  • 展示效果

image.png

2.10 特殊字符

对于有特殊含义的字符,需要通过转移字符来表示

语法:

1681200435834.png
在这里插入图片描述

1681200487125.png
在这里插入图片描述

代码1+效果
  • 代码
    &lt;span&gt;  <br>
    &lt;a href="http://www.atguigu.com"&gt;&nbsp;&nbsp;&lt;/a&gt; <br>
    &amp;amp;
  • 效果

image.png

代码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>
  • 效果

image.png

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15208.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!