HTML笔记

1.HTML笔记

1.1HTML文件

1.1.1文档声明

<!Doctype html>

1.1.2.基本页面模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />  <!-- 媒体设置字符集设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <!-- 媒体设置视口设置 -->
  <!-- width=device-width：将视口的宽度设置为设备的宽度。
    这意味着网页的宽度将与设备的屏幕宽度相匹配，不会被缩放或拉伸
    ，从而确保网页在不同设备上有良好的显示效果。
    initial-scale=1.0：设置页面的初始缩放比例为1.0。
    这意味着页面加载时不进行缩放，以实际尺寸显示。
    这有助于确保页面以合适的大小在设备上显示，
    而不会因为默认的缩放而导致布局错乱或失真。 -->
    <title>Document</title>
  </head>
  <body></body>
</html>

1.1.3.标签属性

1. 属性是属于标签的，不同的标签有不同的属性
2. 属性由属性名和属性值组成，属性值使用单引号或双引号包裹，或者不使用引号
3. 标签中，同名的属性不能设置多次，如果设置后面的属性不会生效
4. 属性不区分大小写

1.1.4.主体结构标签

标签名	语义和功能	标签
html	根元素	双标签
head	头	双标签
body	主体	双标签

1.1.5.head中的标签

标签名	语义和功能	属性	标签
meta	设置页面元信息	charset: 设置字符集编码，值推荐 utf-8	单标签
title	标题栏标题		双标签

1.1.6.开发文档

W3C 官网： https://html.spec.whatwg.org/multipage/

W3Cscholl：https://www.w3cschool.cn/htmltags/

MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTML

1.1.7.排版标签

标签名	语义和功能	属性	单标签还是双标签
h1 ~ h6	一级标题~六级标题	无	双标签
p	段落	无	双标签
hr	分隔线	无	单标签
br	换行	无	单标签
pre	原格式显示	无	双标签
div	无语义，用于页面布局	无	双标签

1.1.7.1.pre 原格式显示

  <pre>
    12345678910                 12345678910                12345678910                12345678910  
    12345678910                 12345678910                12345678910                12345678910  
   </pre>

1.1.8.文本标签

标签名	语义和功能	属性	单标签还是双标签
em	强调，默认表现斜体字	无	双标签
strong	强调，默认表现粗体字	无	双标签
ins	表示增加的内容，默认添加下划线	无	双标签
del	表示删除的内容，默认添加删除线	无	双标签
sub	下标字	无	双标签
sup	上标字	无	双标签
span	无语义，配合CSS给文字设置样式	无	双标签

1.1.8.1.上标与下标

 H<sub>2</sub>O
    <br>
    2<sup>2</sub>=4

1.1.8.2.span使用

 <p>
      举头望<span style="font-weight: 700">明月</span> ，低头思<span
        style="color: skyblue"
        >故乡</span
      >。
    </p>

1.1.9.img标签

标签名	语义和功能	属性	单标签还是双标签
img	引入图片	src：设置图片地址。 alt：设置图片替代文字。 width：设置宽度。 height：设置高度	单标签

1.1.9.1.base64 图片

1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2. 原理：把图片进行 base64 编码，形成一串文本。
3. 如何生成：靠一些工具或网站。
4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

<img
    src="data:image/jpeg;base64,文件的编码" />

1.1.10.a标签

标签名	语义和功能	属性	单标签还是双标签
a	超链接	href：设置目标文件地址。 target：设置目标文件在哪个窗口打开	双标签

target 属性设置目标文件在哪个窗口打开，默认值是 _self,表示本窗口打开；可以设置为 _blank, 表示新窗口打开

1.1.10.1.目标是网页

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

1.1.10.2.目标文件是网页以外的其他类型文件

目标文件分为两种：
浏览器能够打开： 点击超链接，浏览器直接打开，如网页文件、图片文件、视频文件、pdf文件等
浏览器无法打开： 点击超链接，直接下载

1.1.10.3.超链接唤起指定应用

<a href="tel:10086">打电话</a> <br>
<a href="sms:10010">发短信</a> <br>
<a href="mailto:[email protected]">发邮件</a>

1.1.10.4.锚点

1.1.10.4.1.设置锚点

<div id="锚点名"></div>
<p id="锚点名"></p>

1.1.10.4.2.通过超链接跳转到锚点

<!-- 跳转到本页面的锚点 -->
<a href="#锚点名"></a>

<!-- 跳转到其他页面的锚点 -->
<a href="页面地址#锚点名"></a>

<!-- 跳转到页面顶部 -->
<a href="#"></a>

1.1.11.列表

1.1.11.1.无序列表

<-- 无序列表 -->
<ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
</ul>
<-- 超链接无序列表 -->
<ul>
     <li>
         <a href="#">HTML</a>
     </li>
     <li>
         <a href="#">CSS</a>
     </li>
     <li>
         <a href="#">JavaScript</a>
     </li>
</ul>

<-- 嵌套无序列表  -->
 <ul>
     <li>
         <a href="#">首页</a>
     </li>
     <li>
         <a href="#">论坛</a>
     </li>
     <li>
         <a href="#">关于我们</a>
         <ul>
             <li>
                 <a href="#">联系我们</a>
             </li>
             <li>
                 <a href="#">加入我们</a>
             </li>
             <li>
                 <a href="#">举报我们</a>
             </li>
         </ul>
     </li>
     <li>
         <a href="#">商城</a>
     </li>
     <li>
         <a href="#">博客</a>
     </li>
</ul>

1.1.11.2.有序列表

 <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>

1.1.11.3.自定义列表

 <dl>
      <dt>静夜思</dt>
      <dd>床前明月光</dd>
      <dd>疑是地上霜</dd>
      <dd>举头望明月</dd>
      <dd>低头思故乡</dd>
 </dl>

1.1.11.4.列表标签总结

标签名	功能和语义	单标签还是双标签
ul	无序列表包裹元素	双标签
ol	有序列表包裹元素	双标签
li	列表项	双标签
dl	定义列表包裹元素	双标签
dt	定义列表项标题	双标签
dd	定义列表项描述	双标签

li 必须被 ul 或者 ol 直接包裹!

1.1.12.表格标签

table
    caption
    thead
        tr
            td/th
            ....
        tr
        ...
    tbody
        tr
            td/th
            ...
        tr
        ...
    tfoot
        tr
            td/th
            ...
        tr
        ...

例子

 <table>
      <!-- 表格标题 -->
      <caption>
        用户信息表
      </caption>
      <!-- 表格头 -->
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>电话</th>
        </tr>
      </thead>
      <!-- 表格体 -->
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>17759241111</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>17759241111</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>17759241111</td>
        </tr>
      </tbody>
      <!-- 表格脚 -->
      <tfoot></tfoot>
    </table>

1.1.12.1.表格标签属性

1.1.12.1.1.表格整体样式设置

width：     设置宽度
height:  设置高度
cellspacing： 设置单元格之间的间距
cellpadding： 设置单元格内补白（边框与内容的间距）
border： 设置边框边框

1.1.12.1.2. 设置单元格宽高

给 td、th 设置 width 和 height 属性：

给 td、th 设置 width 相当于设置列宽
给 td、th 设置 height 相当于设置行高

给 tr 和 td 设置 height 有什么区别：

给 th、td 设置height，实际行高会在设置的高度的基础上加上上下的 cellpadding
给 tr 设置 height 就是总行高

1.1.12.1.3.表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格包裹元素	width height cellspacing cellpadding border	双标签
caption	表格标题		双标签
thead	表格头	align valign	双标签
tbody	表格体	align valign	双标签
tfoot	表格脚	align valign	双标签
tr	行	height align valign	双标签
td	单元格	width height align valign colspan rowspan	双标签
th	表头单元格	width height align valign colspan rowspan	双标签

1.1.13.表单

标签名	语义和功能	属性	单标签和双标签
form	表单包裹元素	action：设置表单提交地址。 target：设置提交地址从那个窗口打开	双标签
input	各种类型的表单控件	type：表单控件类型。 maxlength：最大可输入长度。 checked：设置默认选中。 name：表单控件标识。 value：表单控件的值。 disabled：设置为不可用。	单标签
button	各种类型的按钮	type：按钮类型。 disabled：设置为不可用。	双标签
textarea	文本域	rows: 默认显示的行数。 cols：默认显示的列数。 name：表单控件标识。 disabled：设置为不可用。	双标签
select	下拉选项包裹元素	name：表单控件标识。 disabled：设置为不可用。	双标签
option	下拉的选项	value：表单控件的值。 disabled：设置为不可用。 selected: 设置默认选中。	双标签
label	用于关联表单控件	for：表单控件的id	双标签
fieldset	设置外围的边框	无	双标签
legend	设置表单标题需要与fieldset配合	无	双标签

1.1.13.1.label标签

      <label for="name">姓名</label>
      <input type="text" id="name" />
      <br />
      <label for="password">密码</label>
      <input type="password" id="password" />
      <br />
      <label>男 <input type="radio" name="sex" value="男" /></label>
      <label> 女<input type="radio" name="sex" value="女" /></label>
      <br />

1.1.14.iframe内联框架

标签名	功能和语义	属性	单标签还是双标签
iframe	内联框架将各种类型的文件引入当前页面	src: 设置目标文件地址。 frameborder：设置是否有边框，0表示没有，其他数字表示有。 width：设置宽度。 height：设置高度。	双标签

1.1.15.字符实体

一些字符在 HTML 中是预留的，拥有特殊的含义，比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

注意：实体对大小写敏感。

1.1.16.HTML全局属性

1.1.17.meta 元信息

<!-- 字符集编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 设置完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 设置网页刷新 -->
<!-- <meta http-equiv="refresh" content="3">
http-equiv="refresh"：http-equiv 属性被用于模拟 HTTP 头部，其中 refresh 是 HTTP 头部的一种。
content="3"：content 属性指定了刷新的时间间隔，这里是 3 秒。
-->

<!-- 定时跳转 -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">

标签：1.1,标签,笔记,表单,HTML,设置,属性
From： https://www.cnblogs.com/yfjblog/p/17990853