【JavaWeb】尚硅谷 JavaWeb笔记 HTML部分

最新推荐文章于 2025-12-26 16:47:32 发布

原创最新推荐文章于 2025-12-26 16:47:32 发布 · 876 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #html #前端

JavaWeb 专栏收录该内容

6 篇文章

订阅专栏

HTML

基本概念

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容
超文本：HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
标记语言：说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果
双标签:标签是通过一组尖括号+标签名的方式来定义的：

<p>HTML is a very popular fore-end technology.</p>

这个例子中使用了一个p标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。

单标签

<input type="text" name="username" />

属性

<a href="http://www.xxx.com">show detail</a>

href=“网址” 就是属性，href是属性名，"网址"是属性值

基础结构

文档声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准
HTML5版本的文档类型声明是：

<!DOCTYPE html>

现在主流的技术选型都是使用HTML5，之前的版本基本不用了

根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面

头部元素

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等

主体元素

body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内

注释

HTML注释的写法是

<!-- 注释内容 -->

结构示例

我的第一个网页 hello html!!!

专业词汇

标签：代码中的一个 <> 叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签
属性：一般在开始标签中,用于定义标签的一些特征
文本：双标签中间的文字,包含空格换行等结构
元素：经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素

语法规则

根标签有且只能有一个
无论是双标签还是单标签都需要正确关闭（注意关闭的语法）
标签可以嵌套但不能交叉嵌套
注释语法为 ,注意不能嵌套
属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
HTML中不严格区分字符串使用单双引号，但是不能混用，如果需要嵌套使用则单双引号轮流使用
HTML标签不严格区分大小写,但是不能大小写混用
HTML中不允许自定义标签名,强行自定义则无效

常见标签

标题标签

标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

段落标签

段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果

<body>
    <p>
        记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。
    </p>
    <p>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，
        算力每投入1元，将带动3至4元的GDP经济增长。
    </p>
    <p> 
        近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。
        当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。
    </p>
</body>

换行标签

单纯实现换行的标签是br,如果想添加分隔线,可以使用hr标签

<body>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
    <br>
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。
    <hr>
        中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>

列表标签

有序列表：分条列项展示数据的标签, 其每一项前面的符号带有顺序特征
- 列表标签 ol
- 列表项标签 li
```
<ol>
    <li>JAVA</li>
    <li>前端</li>
    <li>大数据</li>
</ol>
```
无序列表：分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- 列表标签 ul
- 列表项标签 li
```
<ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</li>
</ul>
```

嵌套列表：列表和列表之前可以嵌套,实现某一项内容详细展示

<ol>
    <li>
        JAVA
        <ul>
            <li>JAVASE</li>
            <li>JAVAEE</li>
            <li>数据库</li>
        </ul>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>

超链接标签

点击后带有链接跳转的标签 ,也叫作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>

多媒体标签

img(重点)：图片标签,用于在页面上引入图片

<!-- 
src
	用于定义图片的连接
title
	用于定义鼠标悬停时显示的文字
alt
	用于定义图片加载失败时显示的提示文字
-->
<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />

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>

表格标签(重点)

table标签代表表格
thead标签代表表头可以省略不写
tbody标签代表表体可以省略不写
tfoot标签代表表尾可以省略不写
tr标签代表一行
td标签代表行内的一格
th标签自带加粗和居中效果的td
通过td的 rowspan 属性实现上下跨行
通过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>

表单标签(重点)

表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一

form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
- action, form标签的属性之一,用于定义信息提交的服务器的地址
- method, form标签的属性之一,用于定义信息的提交方式
  - get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
    1. 参数会以键值对形式放在ur1后提交ur1?key=value&key=value&key=value
    2. 数据直接暴露在地址栏上,相对不安全
    3. 地址栏长度有限制,所以提交的数据量不大
    4. 地址栏上,只能是字符,不能提交文件
    5. 相比于post效率高一些
  - post post方式,数据会通过请求体发送,不会在缀到url后
    1. 参数默认不放到ur1后
    2. 数据不会直接暴露在地址栏上,相对安全
    3. 数据是单独打包通过请求体发送，提交的数据量比较大
    4. 请求体中,可以是字符,也可以字节数据，可以提交文件
    5. 相比于get效率略低一些
input标签,主要的表单项标签,可以用于定义表单项
- name, input标签的属性之一,用于定义提交的参数名
- value,定义提交的实参，如果在代码里写这个，网页中就会出现默认内容，一般不写
- type, input标签的属性之一,用于定义表单项类型
  - text 文本框
  - password 密码框
  - submit 提交按钮
  - reset 重置按钮

   <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>

常见表单项标签(重点)

单行文本框
```
个性签名：<input type="text" name="signal"/><br/>
```
- 加入 readonly = “readonly” 属性，文本框内的内容不可以修改
  - 加入 disabled = “disabled” 属性，文本框内的内容不可用

密码框

密码：<input type="password" name="secret"/><br/>

单选框
```
你的性别是：
<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即可
在早期的无线电广播技术中，听众只能选择一个频道进行收听。当你调到某个频道时，你就不能同时收听其他频道的广播。这种“一次只能选择一个”的特性被借用到了用户界面设计中。这种控件的设计灵感就来源于早期的无线电调谐器。因此，这种控件被称为“单选按钮”或“radio button”。

复选框

你喜欢的球队是：
<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

下拉框
```
你喜欢的运动是：
<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"属性实现默认选中的效果。

按钮

<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绑定单击响应函数
重置按钮: 点击后将表单内的所有表单项都恢复为默认值
提交按钮: 点击后提交表单

隐藏域
```
<input type="hidden" name="userId" value="2233"/>
```
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
多行文本框
```
自我介绍：<textarea name="desc"></textarea>
```
textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。
文件标签
```
头像:<input type="file" name="file"/>
```
- 不同浏览器显示的样式有微小差异

布局相关标签

div标签：俗称"块",主要用于划分页面结构,做页面布局
span标签俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰

    <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>