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>

image

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

image

1.1.8.2.span使用

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

image

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:10086@qq.com">发邮件</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>

image

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 源码中插入字符实体。

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

image

1.1.16.HTML全局属性

image

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">
posted @ 2024-01-27 18:05  朱有望  阅读(60)  评论(0)    收藏  举报