欢迎光临
我的个人博客网站

学点东西


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> 

显示的结果如下:

学点东西

网页开发工具

此处用 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> 

学点东西

图像标签和路径

  • 图像标签

    <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 = "合并单元格的个数"
      最左侧单元格为目标单元格, 写合并代码

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

表格总结

赞(0) 打赏
未经允许不得转载:张拓的天空 » 学点东西
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏