Vinson

Vinson

HTML-基础

发表于 2023-08-03
Vinson
阅读量 50

HTML-常用标签

什么是 html?

  • Hyper Text Markup Language 超文本标记语言
  • 用来描述网页的一种标记语言
  • 标记语言里面包含了一套标记标签

提示
段落引用文件扩展名以 .html 或 .htm 为标识。包含了 html 的标记和纯文本。

下载编辑器 Vscode - Download

浏览器内核

内核 浏览器 前缀
webkit Safari(苹果) webkit
webkit Chrome(谷歌) webkit
Gecko firefox(火狐) moz
presto/webkit/Blink Opera(欧朋) o
Trident IE浏览器的内核 ms

html 基本结构

  1. 在编辑器中创建一个以 .html 结尾的文件
  2. 输入 ! 再按下 table 或回车,会看到如下代码:
<!-- 此行为注释内容,不会被浏览器执行。 -->
<!DOCTYPE html> <!-- 文件的声明,告诉浏览器以什么规则来解析 -->
<html lang='zh-cn'> <!-- html 网页的开始 lang表示这个网页的语言,zh-cn表示为中文,如果为其他地区的语言浏览器会提示是否翻译网页。-->
<head> 
  <!-- head 提供一些机器可读信息 -->
  <meta charset='UTF-8'> <!-- 设置网页的字符编码格式 utf-8包含了所有语言编码,如果文件保存的编码与打开文件的编码不对,会出现乱码的情况。 -->
  <meta name='description' content='描述信息'> <!-- 网页的描述 -->
  <meta name='keywords' content='用于搜索引擎的关键词'> <!-- 关键词 -->
  <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'> <!-- 设置视口信息 -->
   <!-- 网页图标 -->
  <link rel="icon" href="favicon.ico">

  <title>Document</title> <!-- 网页的标题 -->
</head>
<body> <!-- 网页的主体部分 -->
  
</body>
</html> <!-- 网页的结束 -->
html
  • <!DOCTYPE html>:这是 html5 的声明,不是标记。
    • 用于告诉浏览器此文件的类型,让浏览器正确解析。
    • DOC:document 文件,TYPE = 类型,html = 超文本标记语言(网页)html5
  • 元素
    • 以某个标签开始 标签结尾,标签中间的是书写内容的地方。
    • 当然也有空标签从 <xx/> 开始就进行关闭。有少量的这种单标记,列如 <input/>、<img/>、<meta>,也叫做空标记和自闭合标记。
  • 属性
    • 所有的元素都有属性,以 属性名=‘属性值’ 存在
    • 属性值始终被引号包起来,推荐使用双引号(不能互相保护)
    • 属性名与值对大小写不敏感,写了大写也会被浏览器转换成小写。(推荐小写)

meta标签

<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!--   
  author   			  作者
  keywords 			  定义关键字
  description  		  定义描述
  viewport            手机浏览器的窗口大小,
  device-width        浏览器窗口的宽度与手机宽度保持一致
  initial-scale=0.5'  让网页缩放为原来的0.5倍
  user-scalable=no	  不允许用户缩放
-->

<meta http-equiv="refresh" content="30">
<!-- 每30秒钟刷新当前页面: -->

<!-- 以最高版本的ie渲染显示 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- 兼容不支持viewport的设备 -->
<meta name="HandheldFriendly" content="true">
html

常用标签

标签分为两类:块级元素和行内元素。

  • 块级元素:单独占用一行,从上到下排列。
  • 行内元素:从左到右排列,不会以新的一行开始,一行占满后会换行。

标题标签

尝试在body标签内输入以下内容在浏览器中打开

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

提示
在vscode编辑器中安装 open in browser 插件,快捷键 alt+b 可快速在浏览器中打开 html 文件。

  • h1:作用主标题(最重要的),页面中只能出现一次。在搜索引擎会为网页结构和内容来索引,一般用于网站的 logo。

  • h2-h6:则可以出现多次,标题标签包裹的内容会加粗文本,不要仅仅为了加粗改变字体使用 h 标签。

段落标签

  • 段落
<p>这是段落内容,浏览器会在段落前后自动添加空行</p>
<div>这是区块,块级标签,没有特殊含义,用于划分网页结构</div>
<span>内联元素</span><span>也没有特殊含义</span>
html
  • 文本格式
<strong>加粗</strong> <!-- 有语义 -->
<b>加粗</b> <!-- 无语义 -->

<hr> <!-- 分割线标签 -->

<em>倾斜</em> <!-- 有语义 -->
<i>倾斜</i> <!-- 无语义 -->
<hr>

<del>删除线</del> <!-- 有语义 -->
<s>删除线</s> <!-- 无语义 -->
<hr>

<!-- 2的8次方 -->
2<sup>8</sup> <!-- 上标 -->
2<sub>2</sub> <!-- 下标 -->

<!-- 拼音 -->
<ruby><rt>tāo</rt>
</ruby>
<ruby><rt>tiè</rt>
</ruby>
html

段落引用提示
段落引用建议使用有语义的标签

图片标签

<img src="./1.jpg" alt="替换文本" width='' height=''>

  • src:图片的位置路径
  • alt:图片加载失败后显示的文本
  • width/height:图片的宽或高,如果只设置一个,另一个则为 auto(自动),自动等比例缩放。

路径

  • 相对路径
    • 以./开头, ./ 表示当前文件所在的位置,…/表示上一级文件,…/…/表示上上级,以此类推。
  • 绝对路径
    • 以 / 开头,例如:F:\WEB\index.html,服务器上则是网站的根目录。

链接

<a href="" target="" title=''> 点击打开链接的内容 </a>

特点:会改变文本内容的颜色,添加下滑线,把鼠标指针移入到链接的内容上时,鼠标的光标会变成手型.

  • href:链接外部文件的路径
  • target:定义怎么打开窗口
  • target='_self ':当前窗口打开(默认)
  • target=‘_blank’:新窗口打开
  • title:鼠标悬停的提示
  • 跳转到已知文件
<!-- 已知网站 完整的网址-->
<a href="https://www.baidu.com"> 百度 </a>
<!--本地文件的链接  -->
<a href="./login.html">请登录</a>

html
  • 跳转到未知文件
<!-- 返回到页面的顶部 -->
<a href="#">空链接</a>
<!-- 原地跳转 不会发生任何操作-->
<a href="javascript:;">js的空语句</a>

html
  • 下载
<!-- 路径是文件的类型时 -->
<a href="../../文件.rar">下载</a>
html
  • 锚点链接
    • 跳到当前页面某个位置
      <div id="a">div</div>
      <a href="#ms">跳转<a/> <!-- 会跳转到id为a的位置 -->
    html
    • 跳到其他页面某个位置
      <div id="b">登录</div>
      <a href="./login.html#ms"> 跳转</a> <!-- 会跳转到另一个文件,并滚动到id = b的位置-->
    html

列表

  • 无序列表
    <ul>
      <li> 无序列表项 </li>
      <li> 无序列表项 </li>
      ....
    </ul>
    html

列表项默认使用粗体的小圆点进行标记

  • 有序列表
    <ol>
      <li>有序列表项</li>
      <li>有序列表项</li>
      ...
    </ol>
    html

项目列表,列表项默认使用数字进行标记

li 标签可以包含任意其他元素,但 ul 与 ol 不要包含除 li 以外的标签

  • 自定义列表
    • dl 和 dt dd 是组合标签,dl 下只能包含 dt 和 dd
    • dt 和 dd 可以包含其他任意元素
    • dt 和 dd 是同级关系
<dl>
	<dt>定义列表项标题</dt>
	<dd>定义描述内容</dd>
	<dd>定义描述内容</dd>
</dl>
html

表格

<table border="1" cellspacing='0'>
  <caption>学员信息表 表格的标题</caption>
  <tbody>
    <tr>
      <td>第一个单元格</td>
      <td>第二个单元格</td>
      <td>第三个单元格</td>
    </tr>
    <tr>
      <td>第一个单元格</td>
      <td>第二个单元格</td>
      <td>第三个单元格</td>
    </tr>
    <tr>
      <td rowspan="2">纵向合并</td>
      <td colspan="2">横向合并</td>
    </tr>
    <tr>
      <td>第二个</td>
      <td>第三个</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>统计人数:</td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>
html
  • table 的属性

    • border:边框线

    • width:宽度

    • height:高度

    • cellspacing:单元格之间的间距 默认值2

    • cellpadding:内容与单元格边框之间的距离 默认1

  • table 的 css 属性

    • border-collapse:separate(边框独立),collapse(相邻边框被合并)
  • td 单元格属性

    • rowspan:纵向合并(跨行合并)
    • colspan:横向合并(跨列合并)

段落引用提示
段落引用table 表格内 tbody 标签可以有多个,把 thead 放在 tbody 下面也可以用于搜索引擎 seo 优先爬到表格的标题 caption 与 tbody 正文。

html的书写规范

  1. 文档类型的声明以及编码
  2. tdk
    • t:title 定义网页的标题
    • d:description 定义描述
    • k:keywords 定义关键字
  3. 字体图标的引入
  4. 嵌套缩进、标签、属性、属性值小写
  5. 语义化,使用有含义的标签,img 要加 alt 属性,多行、单行文本文本溢出要加 title 属性。
  6. 合理嵌套标签 ul li,ol li,dl dt 和 dd。交互性标签 a 不要嵌套 button,段落与标题、标题与标签不能嵌套。
评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • 测试文章

    20点赞10评论

  • webpack5(一)

    20点赞10评论