第一弹:HTML,学习记录-CSDN博客

本文链接：https://blog.csdn.net/weixin_64638001/article/details/137536101

1.创建文件所需要注意事项

可以以中文命名，不使用中文。
不使用特殊字符。
HTML文件名推荐使用小写。
如果是多个单词创建的文件名，推荐使用驼峰命名法，每个单词首字母大写 HelloWorld
创建完HTML文件后依然是文本文件格式，那么需要将系统中隐藏已知文件类型扩展名勾选掉。

2.HTML主体结构

<!DOCTYPE html> <!--声明头-->
<html>
  <!--头标签-->
  <head>
  </head>
  <!--体标签-->
  <body>
  </body>
</html>

3.<head>标签中常用的标签

<head lang="en">
  <!--
    lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。
    搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录
    -->
<title></title>设置页面字符串
<meta charset="utf-8" /> 设置页面字符集
<meta http-equiv="content-type" content="text/html;charset=utf-8" />设置页面字符集（HTML4）
<!--
    .html text/html  指的是文件mime类型
    .css  text/css
    .jpg  image/jpeg
    .jpeg  image/jpeg
    .png   image/png
    .gif   image/gif
    www.baidu.com  文件mime类型
-->
<!--http-equiv 告知浏览器的行为-->
<meta http-equiv="refresh" content="5;url=https://www.lmonkey.com" /> 设置5秒后自动跳转到学习猿地
<meta http-equiv="refresh" content="5" />设置浏览器5秒刷新一次
<!--name 告知浏览器的内容-->
<meta name="keywords" content="关键字1,关键字2"/> 设置网站关键字，多个关键字之间用英文状态下的逗号分割
<meta name="description" content="描述的内容" />设置网站的描述
<link />定义两个文档之间连接的关系
<!--
    rel = "表示文档与被连接文档之间的关系"
    type = "被连接文档的类型"
    href = "被连接文档的地址"
-->
<link rel="icon" type="" href=""/>加载标题icon图标
<!--了解级别-->
<link rel="stylesheet" type="text/css" href="" />加载CSS样式
<style></style> 加载CSS样式
<script></script> 加载JS脚本
<!--阻止移动浏览器自动调整页面大小-->
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
<!--
    name = "viewport" 说明此meta标签定义视口的属性
    initial-scale = 2.0 意思是将页面放大两倍
    width = device-width 告诉浏览器页面的宽度的能与设备的宽度
-->
<meta name="viewport" content="width=device-width,maximun-scale=3,minimum-scale=0.5" />
<!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半-->
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放-->

4.<body>标签中常用的标签

4.1. 文本与文本格式标签

<p></p>  <!--段落标签-->
<b></b>        <!--加粗-->
<strong></strong>  <!--强调某段文本-->
<em></em>   <!--强调某段文本-->
<i></i>    <!--斜体-->
<br/>    <!--换行-->
<hr />    <!--水平线-->
<u></u>    <!--下划线标签-->
<del></del>    <!--删除线标签-->
<hn></hn>    <!--h族标题标签 n 1 ~ 6-->
<bdo></bdo>    <!--覆盖默认的文本方向 dir="ltr | rtl"  ltr  left to right   rtl right to left-->
<sub></sub>    <!--下标文本-->
<sup></sup>    <!--上标文本-->
<details></details>    <!--交互式控件、可见的或者隐藏的补充细节-->
<summary></summary>    <!--为details定义标题-->
<dialog></dialog>    <!--定义对话框或窗口  open="true"-->
<pre></pre>    <!--原格式输出-->
<figure></figure>    <!--用于对元素进行组合。多用于图片与图片描述组合-->
<mark></mark> <!--标记文本-->
<figure>
    <img src="img.gif" alt="figure标签"  title="figure标签" />
    <figcaption>figure的标题</figcaption>
</figure>
<mark></mark>
    定义带有记号的文本，它会给你要突出显示的文本下加个背景色。
    如：<p>你是<mark>大长腿</mark>吗？</p>

4.2. 语义化标签

布局中使用
<div></div>           块状元素 代表一个区块  H4
<span></span>       行内元素  H4
<header></header>  头部标签  H5
<footer></footer>  底部标签 H5 
<nav></nav>          导航标签 H5
<address></address> 地址    H5
<section></section> 块状元素   H5
<article></article> 文章标签  H5
<aside></aside>    侧边栏   H5

4.3. 列表标签

<ul></ul>  无序列表
<ol></ol>  有序列表
<li></li>  为有序或无序列表定义列表项
<dl></dl>  定义列表
<dt></dt>  定义列表中的一个项目
<dd></dd>  为定义列表项作描述

4.4. 超链接标签

<a></a>
<!--常用属性-->
<!--
    href = "" 用于定义需要跳转页面的地址
    target = "" 定义页面打开的方式
    常用的值：
        _self默认，当前窗口打开链接的文档
        _blank,在新窗口中打开文档
-->
<!--
锚点：快读定位到页面中需要的位置
如何实现
在要到达的a标签中设置id属性，属性名自定义
在点击的a标签的href属性中使用#自定义属性名即可实现关联
-->
<a href="#one">点击跳转的地方</a>
<a id="one">到达的地方</a>

4.5. 多媒体标签

<img /> 图像标签
    src="要引入图片的地址"
    width="设置图片的宽度"
    height="设置图片的高度"
    alt="当图片加载失败时用于替换的文字信息"
    title="设置标题"
    usemap="关联地图"
<map></map> 定义图像映射(图片带有可点击区域)
    name 定义映射名称 (与usemap属性进行关联)
<area /> 定义映射区域
    shape定义形状
    coords 坐标点
    href 跳转的地址
    target 跳转方式
<audio></audio> 音频标签
    src 引入音频地址
    controls 播放控件
    loop 循环播放
<source />用来加载媒介资源
    src
<video></video>
    controls
    poster 视频在点击播放前用于显示的图片
    loop

<embed /> 用来引入媒体
    src
    width
    height
<progress></progress>  进度条标签
    min 最小值
    max 最大值
    value 当前值
<meter></meter> 定义范围内度量
    min 最小值
    max 最大值
    value 当前值
    low 警告的最小值
    high 警告的最大值
    optimum 良好值

4.6. 表格相关标签及属性

表格相关标签

<table></table> 表格
<caption></caption>  表格标题
<tr></tr>  表格的行
<th></th>  表头单元格
<td></td>  表格的单元格
<thead></thead>  表格头部
<tbody></tbody>  表格主体
<tfoot></tfoot>  表格底部

table标签常用属性

| 属性 | 描述 | 说明 | | :---------: | :--------------------------------------: | :---------------------: | | width | 表格宽度 | | | height | 表格高度 | | | align | 表格在页面的水平摆放位置 | 取值：left/center/right | | background | 表格的背景图片 | | | bgcolor | 表格的背景颜色 | | | border | 表格边框的宽度（以像素为单位） | 表格默认没有边框 | | bordercolor | 表格边框颜色 | 当border >= 1时起作用 | | cellspacing | 单元格之间的间距 | | | Cellpadding | 单元格内容与单元格边界之间的空白距离大小 | |

tr(行)标签常用属性

| 属性 | 描述 | | :-----: | :------------------------------------: | | height | 行高 | | align | 行内容的水平对齐方式left/center/right | | valign | 行内容的垂直对齐方式left/middle/bottom | | Bgcolor | 行的背景颜色 |

td(单元格)标签常用属性

| 属性 | 描述 | | :----------: | :---------------------------------------: | | width/height | 单元格的宽度和高度 | | align | 设置水平对齐方式，取值left/center/right | | valign | 设置垂直对齐方式，可取值top/middle/bottom | | bgcolor | 单元格的背景颜色 | | colspan | 设置单元格跨列 | | rowspan | 设置单元格跨行 |

4.7. 表单相关标签

<form></form>用于为用户输入创建HTML表单
<!--
    必须属性：
    action -- 浏览者输入数据被传送到的地方，比如一个PHP页面
    method -- 数据传送的方式
                get -- 此方式传递数据量少，但是传递的信息会显示在网址上。(搜索的)
                post -- 此方式传递信息多，而且不会把传递的信息显示在网址上。(跟用户相关的信息)
-->
<input />为用户定义需要使用的表单项
<!--
        name -- 此表单项的名称
        value -- 此表单项的值
        type -- 代表一个输入域的显示方式(输入型、选择型、点击型)
-->
<input type="text" name="" value="" /> 普通文本域
<input type="password" name="" value="" /> 密码域
<input type="radio" name="" value="" />单选
<!--
    name名称保持一致 才能参数排斥
    checked属性可以使单选和复选框做默认选中
-->
<input type="checkbox" name="" value="" /> 复选
<label></label>为input元素定义标注(绑定元素)
<input type="file" name="" value="" />文件上传
<!--
    如果表单项中出现文件上传选项那么需要左两件事
第一：表单的传输方式必须为post方式
第二：更改表单传输编码格式 在form标签中增加属性enctype="multipart/form-data"

-->
<input type="submit" name="" value="" />提交按钮
<input type="image" src="" title="" alt="" />用图片代替提交按钮
<input type="reset" name="" value="" />重置按钮
<input type="hidden" name="" value="" />隐藏域
<input type="button" name="" value="" />按钮
<button></button> 提交按钮
<button type="submit"></button>提交按钮
<button type="button"></button>按钮
<textarea></textarea> 多行文本输入域
<select></select>下拉列表
<option></option>为下拉列表定义列表项
<!--
    selected 让某一个下拉列表默认选中
-->
<!--H5新增类型-->
<fieldset></fieldset>将表单内的相关元素分组
<legend></legend>为fieldset定义标题
<optgroup></optgroup>为下拉列表定义分组
<datalist></datalist>定义可选数据列表
<input type="email" name="" value="" /> 邮箱验证表单
<input type="url" name="" value="" /> URL验证表单
<input type="number" name="" value="" /> 数值表单
<input type="range" name="" value="" />  滑块验证 范围验证
<input type="search" name="" value="" />  搜索域
<input type="color" name="" value="" />   颜色选取
<input type="tel" name="" value="" />   电话表单
<input type="date" name="" value="" />   日期
<input type="time" name="" value="" />  时间
<input type="week" name="" value="" />   周
<input type="month" name="" value="" />  月
<input type="datetime-local" name="" value="" />  完整的时间格式格式
<!--表单中常用的属性-->
<!--
readonly 输入域可以选择，但是无法修改。(只读)
disabled 输入域无法获取焦点，无法选择，以灰色显示 (禁用)
selected 为下拉列表定义默认选种
autofocus 自动获取焦点属性
placeholder 表单提示信息
required 用于强制用户必须为该表单赋值，否则提示信息
min 用于设定表单的最小值  number   range
max 用于设定表单的最大值   number  range
multiple 设定当前表单允许同时选中多个文件，适用于input[type=file]
pattern 用于自定义验证规则(需要配合正则的语法)
step 设定跳步的数值或者设定2个数值之间的间隔
novalidate 取消表单验证，适用于form标签
formaction 用于在提交按钮中修改当前表单的提交页面
formmethod 用于在提交按钮中修改当前表单的提交方式
formenctype 用于在提交按钮中修改当前表单提交数据编码类型(不用，文件上传时适用)
tabindex    切换索引属性
-->

4.8. HTML全局属性

contentEditable 内容可编辑属性
designMode 页面可编辑属性

4.9. HTML框架标签

<frameset></frameset>代替body标签定义框架页(H5取消)
    <!--
        rows 水平切割
        cols 垂直切割
    -->
<frame />定义frameset标签中每个框架页的内容(H5取消)
    <!--
        src  引入新页面的地址
        name 为该页面起名
    -->
<iframe></iframe>在页面中开一块空间连接一个子页面
    <!--
        frameborder 设置边框
        src 引入页面地址
        width 宽度
        height 高度
    -->