html标签

一. HTML

HTML 是 Hyper Text Markup Language 的缩写，意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容

二. HTML 基础结构

文档声明：HTML文件中第一行的内容，用来告诉浏览器当前 HTML 文档的ׂ基本信以及HTML文档遵循的语法标准 <!DOCTYPE html>

根标签： <html></html> 标签是整个文档的根标签，所有其他标签都必须放在这对标签里面

头部元素：<head></head> 标签是 <html></html> 第一个一级子标签,用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title߶标签、script标签、style߶标签、link标签、meta标签等等

主体元素： <body></body> 标签是<html></html> 第二个一级子标签,用于标签定义网页的主体内容，在浏览器窗口ӄ内显示的内容都定义到body标签内

注释： 

三. HTML 的语法规则

根标签是<html></html>有且只能有一个

无论是双标签是单标签都需要正确关闭

标签可以嵌套但不能交叉嵌套

属性必须有值，值必须加引号，HTML 5中属性名和值相同时可以省略属性值

HTML 中不严格区分字符串使用单双引号

HTML 标签不严格区分大小写，但是不能大小写混用

HTML中不允许自定义标签名，强行自定则无效

四. HTML 常见标签

帮助文档：https://www.w3school.com.cn/

4.1 标题标签

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

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

4.2 段落标签

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

    <body>
         <p>你好</p>
         <p>欢迎</p>
         <p>来到我的博客</p>
    </body>

4.3 换行标签

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

    <body>
         欢迎
     <br>
         来到 <hr>
         我的博客
    </body>

4.4 列表标签

有序列表，分条列项展示数据的标签，其每一项前面的符号带有顺序特征：

    <ol>
         <li>JAVA</li>
         <li>前端</li>
         <li>大数据</li>
    </ol>

无序列表，分条列项展示数据的标签，其每一项前面的符号不带有顺序特征：

    <ul>
         <li>JAVA</li>
         <li>前端</li>
         <li>大数据</li>
    </ul>

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

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

4.5 超链接标签

点击后跳转链接标签，也叫作a标签：

href 属性用于定义链接地址：
    href 中可以使用绝对路径，以 / 开头，始终以一个固定路径作为基准路径作为出发点
    href中也可以使用相对路径，不以 / 开头，以当前文件所在路径为出发点， . / 开头表示当前路径， . . /表示上一层路径
    href中也可以使用完整的URL

target 用于定义链接打开的方式
    _blank 在新窗口中打开目标资源
    _self 在当前窗口中打开目标资源

<body>
<a href="01html.html" target="_blank">相对路径本地资源连接</a> <br>
<a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br>
<a href="http://www.cnblogs.com" target="_blank">外部资源链接</a> <br>
</body>

4.6 多媒体标签

img 图片标签，用于在页面上引入图片：

src 属性用于定义图片的连接。

title 属性用于定义鼠标悬停时显示的文字

alt 属性用于定义图片加载失败时显示的提示文字

<img src="img/logo.png" title="博客" alt="加载失败" />

audio 用于在页面上引入一段声音，video 用于在页面上引入一段视频：

src 属性用于定义目标声音资源

autoplay 属性用于控制打开页面时是否自动播放

controls 属性用于控制是否展示控制面板

loop属性用于控制是否进行循环播放

<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />

4.7 表格标签

常规表格

table 标签代表表格

thead 标签代表表头，可以省略不写

tbody 标签代表表体，可以省略不写，浏览器解析DOM时会自动添加

tfoot 标签代表标尾，可以省略不写

tr 标签代表一行

td 标签代表行内的一格

th 标签自带加粗和居中效果的td

<h3 style="text-align: center;">成绩表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th> <th>姓名</th> <th>分数</th>
    </tr>
    <tr>
        <th>1</th> <th>王八</th> <th>86</th>
    </tr>
    <tr>
        <th>2</th> <th>张三</th> <th>72</th>
    </tr>
    <tr>
        <th>3</th> <th>李四</th> <th>66</th>
    </tr>
</table>

单元格跨行：

通过 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>86</td>
        <td rowspan="3">前三名厉害</td>
    </tr>
    <tr>
        <td>2</td> <td>张三</td> <td>72</td>
    </tr>
    <tr>
        <td>3</td> <td>李四</td> <td>66</td>
    </tr>
</table>

单元格跨列

通过 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>86</td>
        <td rowspan="6">前三名厉害</td>
    </tr>
    <tr>
        <td>2</td> <td>张三</td> <td>72</td>
    </tr>
    <tr>
        <td>3</td> <td>李四</td> <td>66</td>
    </tr>
    <tr>
        <td>总人数</td> <td colspan = "2">100</td>
    </tr>
    <tr>
        <td>平均分</td> <td colspan = "2">87.3</td>
    </tr>
    <tr>
        <td>及格率</td> <td colspan = "2">92.3%</td>
    </tr>
</table>

4.8 表单标签

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

form 标签：表单标签，其内部用于定义可以让用户输入信息的表单项标签

action 属性：用于定义信息提交的服务器的地址

method 属性：用于定义信息的提交方式

get值： get 方式提交，数据会缀到 url 后，以？作为参数开始的标识，多个参数用 & 分隔开

post值： post 方式提交，数据会通过请求体发送，不会缀到 url 后

input 标签：主要的表单项标签，可以用于定义表单项

name 属性：用于定义提交的参数名

type 属性：用于定义表单项类型

text    文本框

password    密码框

submit    提交按钮

reset    重置按钮

  <form ;action="http://www.cnblogs.com" method="get">
        用户名 <input type="text" name="username" /> <br>
        密码 <input type="password" name="password" /> <br>
         <input type="submit" value="登录" />
        <input type="reset" value="重置" />
    </form>

4.9 常见表单项标签

单行文本框

个性签名：<input type="text" name="signal"/><br/>

密码框

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

单选框

    你的性别是：
    <input type="radio" name="sex" value="boy" />男
    <input type="radio" name="sex"
    value="girl" checked="checked" />女

name 属性相同的 radio 为一组，组内互斥

当用户选择了一个 radio 并提交表单，这个 radio 的 name 属性和 value 属性组成一个键值对发送给服务器

设置 checked = "checked" 属性设置默认被选中的 radio ，如果属性名和属性值一样的话，可以省略属性值，只写 checked 即可

复选框

    你喜欢的球队是：
    <input type="checkbox" name="team" value="Brazil"/>巴西
    <input type="checkbox" name="team" value="China"
    checked="checked"/>中国
    <input type="checkbox" name="team" value="France"/>法国
    <input type="checkbox" name="team" value="Italian"/>意大利
    <input type="checkbox" name="team" value="German" checked/>德国

下拉框

    你喜欢的运动是：
    <select name="sport">
        <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="提交按钮"/>

隐藏域

<input type="hidden" name="userId" value="2233"/>

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等

多行文本框
自我介绍：<textarea name="desc"></textarea>

textarea 有 value 属性，如果要设置默认值需要写在开始和结束标签之间

文件标签

头像:<input type="file" name="file"/>

4.10 布局相关标签

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>

4.11 特殊字符

对有特殊含义的字符，需要通过转义字符来表示，详情见：https://www.w3school.com.cn/charsets/ref_html_8859.asp

posted @ 2024-03-26 08:38 pine1203 阅读(12) 评论(0) 编辑收藏举报

刷新页面返回顶部

pine1203

html标签

公告