前端大纲(一)纯干货!HTML常用标签总结大纲
学了7天,码了7天,手废党也能看懂!!
手废第一篇:第一章 前端大纲(一) HTML常用标签
提示:你的三连是作者输出下去的动力哦!!真的真的!!!(小声哔哔:赶紧收藏!!内容持续更新中。。。)
文章目录【前端篇】
前言
这篇为前端HTML标签总结大纲,就算你是学习后端开发的同学,但作为一个程序猿,只懂后端不懂前端怎么能行呢,为此特地呕心沥血的肝出此文!
- 哈哈哈哈废话不多说,以下是我学习前端的一些心得笔记,全是干货,感谢各位大佬,小伙伴的支持。希望对各位有所帮助,话不多说直接上干货!!
不懂的问题欢迎下方评论区留言哦,一定一定尽量回答
一、思维导图
二、标签大纲
< html >
html 元素是 HTML 页面的根元素
< head >
head 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
-
< title >
title 元素定义文档的标题
-
< charset >
charset 属性规定在外部脚本文件中使用的字符编码。
-
< style >
规定元素的行内 CSS 样式。
< body >
body 之间的文本是可见的页面内容,定义了 HTML 文档的主体
-
文本
-
< h1 > to < h6 >
h1 - h6 标签之间的文本被显示为标题,层级逐级递减
-
< p >
p 元素定义了 HTML 文档中的一个段落
-
< address >
address 标签定义文档或文章的作者/拥有者的联系信息。
如果 address 元素位于 body 元素内,则它表示文档联系信息。
如果 < address > 元素位于 < article > 元素内,则它表示文章的联系信息。
-
-
表单和输入
-
< table >
table 元素定义 HTML 表格。
-
< tr >
tr 元素定义表格行
-
< th >
th 元素定义表头。
-
< td >
td 元素定义表格单元。
-
-
< form >
表单用于向服务器传输数据。
< form > 标签用于为用户输入创建 HTML 表单,form 元素是块级元素,其前后会产生折行。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
-
action
规定当提交表单时向何处发送表单数据,值为地址。
-
target
规定在何处打开 action URL。
-
-
< input >
定义输入控件,用于搜集用户信息。
-
输入显示
-
type
规定 input 元素的类型
- button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
- checkbox 定义复选框。
- file 定义输入字段和 "浏览"按钮,供文件上传。
- hidden 定义隐藏的输入字段。
- image 定义图像形式的提交按钮。
- password 定义密码字段。该字段中的字符被掩码。
- radio 定义单选按钮。
- reset 定义重置按钮。重置按钮会清除表单中的所有数据。
- submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
- text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
-
list
引用包含输入字段的预定义选项的 datalist 。
-
-
输入限制
验证的时候需要添加form表单域
- email 限制用户输入必须为Email类型
- url 限制用户输入必须为URL类型
- date 限制用户输入必须为日期类型
- time 限制用户输入必须为时间类型
- month 限制用户输入必须为月类型
- number 限制用户输入必须为数字类型
- tel 限制用户输入必须为手机号码类型
- search 搜索框,显示搜索类型
- color 生成一个颜色选择表单
- required 其内容不能为空,必填
-
-
< textarea >
定义多行的文本输入控件。
-
< select >
定义选择列表(下拉列表)。
-
< option >
定义选择列表中的选项。
-
-
datalist
定义下拉列表,使用 input 元素的 list 属性来绑定 datalist。
< datalist > 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。 -
option
-
-
链接
-
< a >
HTML 链接是通过 a 标签进行定义的
-
href
在 href 属性中指定链接的地址
-
target
规定在何处打开目标 URL。仅在 href 属性存在时使用。
- _self:默认,当前页面跳转。
- _blank:新窗口打开。
- _parent:在父窗口中打开链接。
- _top:在当前窗体打开链接,并替换当前的整个窗体(框架页)。
-
-
< link >
标签定义文档与外部资源的关系,例如建立HTML和CSS的链接。
-
-
列表
-
< ul >
定义无序列表。
-
< li >
定义列表的项目。
-
-
< ol >
定义有序列表。
- < li >
-
-
图像/音频/视频
-
< img >
定义图像
-
src
规定显示图像的 URL(路径)。
-
alt
规定图像的替代文本。
-
-
< audio >
定义声音内容。
- autoplay 音频就绪后马上播放
-
< video >
< video > 标签定义视频,比如电影片段或其他视频流。
- autoplay 视频就绪自动播放
- loop 循环播放
- control 向用户显示播放控件
- src 视频url地址
-
< source >
定义媒介,路径。 -
< track >
track 标签为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
-
空元素
空元素是在开始标签中关闭的
<!doctype>
定义文档型,对大小写不敏感。
声明必须是 HTML 文档的第一行,位于 html 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。定义注释
< br >
在 HTML 中,br 标签没有结束标签。
在 XHTML 中,br 标签必须被正确地关闭,比如这样:< br/ >。
< hr >
定义水平线
属性
常用通用属性
-
id
规定元素的唯一 id。
-
class
规定元素的一个或多个类名(引用样式表中的类)。
-
lang
规定元素内容的语言。
英文:lang=“en”
中文:lang=“zh-CN” -
value
为 input 元素的与预定值
-
src
src 属性规定外部脚本文件的 URL
文本
-
b
定义粗体文本
-
em
把文本定义为强调的内容,为斜体字。
-
strong
把文本定义为语气更强的强调的内容,通常是用加粗的字体(相对于斜体)来显示其中的内容。
-
i
定义斜体文本
-
u
定义下划线文本
-
cite
定义引用。
标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
按照惯例,引用的文本将以斜体显示。
语义化标签
< header > 头部标签
< nav > 导航标签
< article > 内容标签
< section > 定义某个区域
< aside > 侧边栏标签
< footer > 尾部标签
补充
以上只是开发中比较常用的标签,欢迎大家补充,若后面还有需要添加的元素,博主后续进行更新。注:标签符默认隐藏。
终于码完了!!!【哭!】
- 都康到这里了,感谢各位三连!!!【康康我,康康我】
大佬:就这啊?
我:就这了【哭!】
后面还会持续更新,欢迎下方评论区留言,下期见!!!
下期内容:
CSS样式表大纲
作者:琉璃Diaspora