HTML

HTML 标签 (上)

HTML 语法规范

基本语法概述

  • HTML 标签是由尖括号包围的关键词, 如 <html>
  • HTML 标签通常成对出现, 如<html> </html>
  • 少数单标签, 如 <br />

标签关系

  • 包含关系
  • 并列关系

HTML 基本结构标签

第一个 HTML

每个网页都有基本的结构标签(骨架标签)

标签名 定义 说明
<html> </html> HTML 标签 页面中最大的标签, 称为 根标签
<head> </head> 文档的头部 head 标签中必须设置 title 标签
<title> </title> 文档的主题 让网页拥有标题
<body> </body> 文档的主体 元素包含文档中的所有内容 
<html> 
    <head>
        <title> 第一个HTML 网页</title> 
    </head>
    <body>爆炸吧现实, 粉碎吧精神, 放逐这个世界!
    </body>
</html>

显示的结果如下:

image-20210218232234545

网页开发工具

此处用 vscode

VSCode 工具生成骨架标签新增代码

  • 标签
  • lang 语言
  • charset 字符集
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vscode
    </title>
</head>

<body>
    爆ぜろリアル！弾けろシナプス！vanishment　this　world！
</body>

</html>

文档类型声明标签

  • 当前页面采取 HTML5 版本来显示网页

lang 语言种类

<html lang="zh-CN">

  • lang="en" 定义语言为英语
  • lang="zh-CN" 定义语言为中文

字符集

<meta charset="UTF-8">

HTML 常用标签

标签语义

根据语义,再合适的位置添加合理的标签,使得页面结构更加清晰

标题标签 <h1>-<h6>

例:

<h1>一级标题</h1>

段落和换行标签

  • 段落标签 <p>

    可以将 HTML 文档划分为若干段落, 例:

    <p>段落标签</p>

  • 换行标签 <br/>

    将文本强制换行显示, 例:

    文本<br/>

  • 不同: 段落标签会使得两端之间有一定垂直距离

文本格式化标签

语义 标签
加粗 或者
斜体 或者
删除线 或者
下划线 或者

<div> 和 <span>标签

没有语义, 就是用来装内容的

  • <div> 一行只能有一个, 大盒子
  • <span> 一行可以有多个, 小盒子

例:

<div>一个div</div>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
<div>一个div</div>
<div>一个div</div>

image-20210219010518276

图像标签和路径

  • 图像标签

    <img src = "url"/>
    属性 属性值 说明
    src 图片路径 必须属性
    alt 文本 图片显示失败时候显示的文字
    title 文本 鼠标悬停在图像上显示的文字
    width 像素 宽
    height 像素 高
    border 像素 设置图像的边框粗细

  • 路径(略)

超链接标签 <a>

  • 语法

    <a href = "跳转目标" target = "目标窗口跳出方式"> 文本或者图像</a>
    属性 作用
    href url, 必须
    taget 打开方式, 默认_self当前, _blank 新标签

  • 连接分类

    • 外部连接 :

      <a href = "https://www.baidu.com"> 百度</a>

    • 内部链接: 网站内部各个页面之间的链接

      <a href = "index.html"> 首页 </a>

    • 空链接:

      <a href = "#"> 首页 </a>

    • 下载链接:

      <a href = "文件"> 点击下载 </a>

    • 网页元素链接:

      <a href = "url"> <img src = "img.jpg"> </a>

    • 锚点链接: 定位到当前页面的某个位置zz　　　　　　　　　　　　　　　　

      <a href = "#barusu"> 跳转到 barusu </a>
<div id = "barusu" > 巴鲁斯 </div>

HTML 注释和特殊字符

  • 注释

    <!-- some comments -->

  • 特殊字符

    空格: &nbsp; &: &amp; 之类的

HTML 标签 (下)

表格标签

表格主要作用

  • 显示数据

表格的基本语法

<table>
    <tr>
        <th>表头</th>
        <td>单元格里面的文字</td>
    </tr>
</table>
  • <table> </table>定义表格
  • <tr> </tr> 定义表格中的行,必须嵌套在 <table> </table> 中
  • <th> </th> 表示 HTML 表格的表头单元格
  • <td> </td> 定义表格中的数据单元格, 必须嵌套在 <tr> </tr> 中

表格属性

不常用

属性名 属性值 描述
align left, center, right 对齐方式
border "1"或"" 默认为"", 即无边框
cellpadding 像素值 规定单元边沿与其内容之间的空白, 默认1像素
cellspacing 像素值 规定单元格之间的空白, 默认2像素
width 像素或者百分比 表格的宽度

表格结构标签

  • <thead> </thead> 表格的头部区域, 必须包含 <tr> 标签
  • <tbody> </tbody> 表格的主体区域
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td> &#8595</td>
                <td>345</td>
                <td>123</td>
                <td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">贴吧</a></span><span> <a
                            href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">图片</a></span><span> <a
                            href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                            target="_blank">百科</a></span> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td> &#8595</td>
                <td>345</td>
                <td>123</td>
                <td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">贴吧</a></span><span> <a
                            href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">图片</a></span><span> <a
                            href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                            target="_blank">百科</a></span> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td> &#8595</td>
                <td>345</td>
                <td>123</td>
                <td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">贴吧</a></span><span> <a
                            href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">图片</a></span><span> <a
                            href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                            target="_blank">百科</a></span> </td>
            </tr>

        </tbody>
    </table>
</body>

</html>

合并单元格

  • 合并单元格的方式: 添加对应属性

    • 跨行合并

      rowspan= "合并单元格的个数"

      最上侧单元格为目标单元格, 写合并代码

    • 跨列合并

      colspan = "合并单元格的个数"
      最左侧单元格为目标单元格, 写合并代码

  • 注意: 被合并的单元格不用写出

表格总结

列表标签

列表的作用

  • 用来布局, 显得整齐有序

无序列表

语法如下:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
  • <ul> </ul>中只能嵌套 <li> </li>
  • <li> </li> 可以容纳任何元素
  • 无序列表的样式属性通常通过 CSS 设置

有序列表

语法如下

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
  • <ol> </ol>中只能嵌套 <li> </li>
  • <li> </li> 可以容纳任何元素
  • 有序列表的样式属性通常通过 CSS 设置

自定义列表

常用于对术语或者名词进行解释和描述, 自定义列表的的列表项前没有任何的项目符号

<dl>
    <dt>名词1</dt>
    <dd>名词1 解释1</dd>
    <dd>名词1 解释2</dd>
</dl>
  • <dl> </dl>里面只能包括 <dt> </dt> 和 <dd> </dd>
  • <dt> </dt> 和<dd> </dd> 个数无限制, 一般一个 <dt> 对应多个 <dd>

表单标签

表单域

  • 一个包含表单元素的区域
  • 用 <form> 标签来定义表单域, 把范围内表单元素信息提交给服务器
<form action = "url" method = "提交方式" name = "表单域名称">
    各种表单元素控件
</form>

常用属性:

属性 属性值 作用
action url 指定接收并处理表单数据的服务器地址
method get/post 用于设置表单数据的提交方式, 其取值为 get 或 post
name 名称 指定表单的名称, 用于区分

表单控件

<input>表单元素

<input type = "属性值"/>
  • <input> 为单标签
  • type 属性指定不同的控件类型

type 属性:

属性值 描述
button 可点击按钮, 结合 js
checkbox 复选框
file 定义输入字段和"浏览按钮", 上传文件用
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 密码
radio 单选按钮
reset 重置按钮
submit 提交, 表单数据发送给服务器
text 单行的输入字段, 默认 20 字符宽

除了 type 属性, <input> 标签具有的其他属性:

属性 属性值 描述
name 自定义 input 元素的名称, 单复选框需要有相同的 name 值
value 自定义 input 元素的默认的值
checked 规定该元素首次加载即被选中
maxlength 正整数 规定输入字符的最大长度

<label> 标签

<label> 用于绑定一个表单元素, 点击它的文本时, 浏览器自动将焦点转到或者选择对应的元素, 如下图:

label

语法:

<label for="male"> 男 </label>
<input type = "radio" name = "sex" id = "male"/>
  • <label> 的for 属性应当与相关元素的 id 属性一致

<select> 表单元素

下拉列表:

语法

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

<textarea> 表单元素

输入多行文本, 常用于留言板, 评论框

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Jyaoushingan/p/14418206.html