Html学习

最新推荐文章于 2024-11-16 23:17:25 发布

chenyiluo94

最新推荐文章于 2024-11-16 23:17:25 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

分类专栏：前端相关文章标签：学习 html5 html

本文链接：https://blog.csdn.net/chenyiluo94/article/details/125375350

前端相关专栏收录该内容

2 篇文章

订阅专栏

这篇博客主要介绍了HTML5的学习，涵盖网页语义结构、元素属性、文本标签、列表标签、图像标签、表单标签以及其它特殊标签。内容详细，适合前端初学者参考。

一个移动端开发，学习前端的过程，比较笨拙从最开始的基础开始。后续就是我分享在这个过程中学到的知识，和记录下来的知识。有需要学习的同学，可以参考，希望对大家有帮助。

一、网页语义结构

1.基本骨架

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

二、元素属性

1.id

元素在网页的唯一标识值
唯一性
不允许包含空格
定位锚点--加上#号html直接定位到指定位置

2.class

网页元素进行分类
可以有多个属性空格分开

3.title

鼠标悬浮导航栏，显示标题，移开不显示

4.tabindex

输入框光标切换输入框
0，参与tab遍历由浏览器决定，通常按照网页出现顺序
正整数，通常按照从小到大进行遍历

5.accesskey

获取焦点的快捷键，指定值可以按下快捷键到该值
与操作系统，浏览器快捷键冲突时，不会起作用

6.style

当前元素的css样式

7.hidden

布尔属性，不再渲染此属性
css可见性设置高于hidden

8.lang

语言

9.dir

文字的阅读方向

ltr：左到右---英语
rtl：右到坐---阿拉伯语等
auto：根据解析内容自行决定

10.contenteditable

允许用户修改内容，用户单击可修改，除非提交到服务器，否则刷新后恢复

11.spellcheck

是否打开拼写检查

12.data

自定义属性，没有其它属性元素合适放就用此定义元素

三、文本标签

1.<div>

无语义的块级元素

2.<p>

块级元素，一个段落

3.<span>

行内标签（即不会产生换行）

4.<br>，<wbr>

换行，块级元素间不要使用，wbr可选换行

5.<hr>

分割线

6.<pre>

保留空格和其它属性

7.<strong><b>

加粗，行内元素，<b>不建议使用违反语义和样式分离的原则

8.<em>，<i>

斜体，行内元素

9.数学公式相关标签

<sub>：下标，行内元素
<sup>：上标，行内元素
<var>：代码或数学公式的变量

10.<u>，<s>

下划线，删除线

11.<blockquote>，<cite>，<q>

链接

12.<code>

计算机代码

13.<mark>

内容黄色显示，加重显示

14.<small>

内容最小显示，法律提示信息

15.<time>，<data>

时间相关

16.<address>

某人或者某个组织的联系信息

17.<ins>，<del>

下划线，中划线

四、列表标签

1.ol

有序列表，会在内部的列表项前面产生数字编号

reversed 倒序
start指定开始的数字
type以什么开始，

a：小写字母
A：大写字母
i：小写罗马数字
I：大写罗马数字
1：整数（默认值

2.<ul>

无序列表，会在内部的列表项前面产生实心小圆点

3.<li>

用在<ol>或<ul>容器之中

4.<dl>，<dt>，<dd>

元素缩进等级

五、图像标签

1.<img>

alt:图像解释说明
width,height宽高
referrerpolicy：导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。 referrerpolicy属性对这个行为进行设置
crossorigin：是否采用跨域的形式下载图片，默认是不采用
loading：auto：浏览器默认行为，等同于不使用loading属性。
lazy：启用懒加载。
eager：立即加载资源，无论它在页面上的哪个位置
srcset：显示多张图片，像素密度
sizes:屏幕大小

2.<picture>

内部使用<source>和<img>

六、表单标签<form>

1.<fieldset>

标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。

2.<label>

3.<input>

autofocus：自动获取焦点
disabled：置灰不可点击，可见
list：设置控件相关数据列表
name：控件键名
readonly：只读
required：是否必填
type：控件类型

type控件类型扩展如下

（1）type="text" 文本

maxlength/minlength：最大值/最小值
pattern：正则
placeholder：默认值
readonly只读
size：输入框长度
spellcheck：是否拼写检查

（2）type="search"

搜索输入框

（3）type="button"

并不建议使用可直接使用button

（4）type="submit"

提交按钮

formaction：提交表单数据的服务器 URL。
formenctype：表单数据的编码类型。
formmethod：提交表单使用的 HTTP 方法（get或post）。
formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
formtarget：收到服务器返回的数据后，在哪一个窗口显示

（5）type="image"

图片作为按钮和submit使用一样

alt：图像无法加载时显示的替代字符串。
src：加载的图像 URL。
height：图像的显示高度，单位为像素。
width：图像的显示宽度，单位为像素。
formaction：提交表单数据的服务器 URL。
formenctype：表单数据的编码类型。
formmethod：提交表单使用的 HTTP 方法（get或post）。
formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
formtarget：收到服务器返回的数据后，在哪一个窗口显示。

（6）type="reset"

切换成初始值

（7）type="checkbox"

复选框

（8）type="radio"

单选框

checked 是否选中当前元素
value 默认on

（9）type="email"

电子邮箱

（10）type="password"

密码
inputmode：允许用户输入的数据类型，可能的值有none（不使用系统输入法）、text（标准文本输入）、decimal（数字，包含小数）、numeric（数字0-9）等。

（11）type="file"

文件选择框，多用于文件上传

（12）type="hidden"

隐藏控件

（13）type="number"

数字

max：允许输入的最大数值。
min：允许输入的最小数值。
placeholder：用户输入为空时，显示的示例值。
readonly：布尔属性，表示该控件是否为只读。
step：点击向上和向下箭头时，数值每次递减的步长值。如果用户输入的值，不符合步长值的设定，浏览器会自动四舍五入到最近似的值。默认的步长值是1，如果初始的value属性设为1.5，那么点击向上箭头得到2.5，点击向下箭头得到0.5。

（14）type="range"

用户拖动滑块

max：允许的最大值，默认为100。
min：允许的最小值，默认为0。
step：步长值，默认为1

（15）type="url"

只能输入网址的输入框
与<datalist>和<option>结合下拉框

（16）type="tel"

电话号码

（17）type="color"

颜色选择器

（18）type="date"

日期选择器，只能年月日不能时分秒

max：可以允许的最晚日期，格式为yyyy-MM-dd。
min：可以允许的最早日期，格式为yyyy-MM-dd。
step：步长值，一个数字，以天为单位。

（19）type="time"

时间输入框可以输入时分秒，不能输入年月日

max：允许的最晚时间。
min：允许的最早时间。
readonly：布尔属性，表示用户是否不可以编辑时间。
step：步长值，单位为秒。

（20）type="month"

年月输入框

（21）type="week"

一年中第几周

（22）type="datetime-local"

是一个时间输入框，让用户输入年月日和时分，格式为yyyy-MM-ddThh:mm

4.<button>

autofocus：是否有焦点
disabled：是否可用置灰
name：控件名字
value：值
type：按钮的类型，可能的值有三种：submit（点击后将数据提交给服务器），reset（将所有控件的值重置为初始值），button（没有默认行为，由脚本指定按钮的行为）。
form：指定按钮关联的<form>表单，值为<form>的id属性。如果省略该属性，默认关联按钮所在父表单。
formaction：数据提交到服务器的目标 URL，会覆盖<form>元素的action属性。
formenctype：数据提交到服务器的编码方式，会覆盖<form>元素的enctype属性。可能的值有三种：application/x-www-form-urlencoded（默认值），multipart/form-data（只用于文件上传），text/plain。
formmethod：数据提交到服务器使用的 HTTP 方法，会覆盖<form>元素的method属性，可能的值为post或get。
formnovalidate：布尔属性，数据提交到服务器时关闭本地验证，会覆盖<form>元素的novalidate属性。
formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖<form>元素的target属性。可能的值有_self（当前窗口），_blank（新的空窗口）、_parent（父窗口）、_top（顶层窗口）。