有关HTML知识点汇总总结

一、VScode常用快捷键列表

  • 代码格式化Shift+Alt+F
  • 向上或向下移动一行:Alt+Up或Alt+Down
  • 快速复制一行代码Shift+Alt+Up或Shift+Alt+Down
  • 快速保存Ctrl+S
  • 快速查找:Ctrl+F
  • 快速替换:Ctrl+H

二、HTML系列总结

1、什么是HTML?

  • HTML是用来描述网页的一种语言。
  • HTML指的是超文本标记语言:Hyper Text Markup Language
  • HTNL不是一种汇编语言,而是一种标记语言
  • 标记语言是一套标记标签(markup tag)
  • HTML使用标记标签来描述网页
  • HTML文档包含了HTML标签及文本内容
  • HTML文档也叫做web页面,网页

2、什么是标签

  • HTML标记标签通常被称为HTML标签(HTML tag)
  • HTML标签是由尖括号包围的关键词,比如<html>
  • HTML标签通常是成对出现的,比如<b>和</b>
  • 标签对中的第一个标签是开始标签,第二个是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • HTML元素

3、网页的基本结构

  • <!DOCTYPE html>声明为HTML5文档
  • <html>元素是HTML页面的根元素
  • <head>元素包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8。
  • <title>元素描述了文档的标题
    • 定义了浏览器工具栏的标题
    • 当网页添加到收藏夹时,显示在收藏夹中默认的标题
    • 显示在搜索引擎结果页面的标题
  • <body>元素包含了可见的页面内容,网页的主体内容部分

三、HTML头部

1、HTML <meta>

  • meta标签描述了一些基本的元数据。
  • <meta>标签提供了元数据,元数据也不显示在页面上,但会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务。
    • 定义关键词:<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
    • 定义描述:<meta name="description" content="">
    • 定义作者:<meta name="author" content="">
    • 定时刷新页面:<meta http-equiv="refresh" content="30">
    • 定义网页的编码格式:<meta charset="utf-8">

2、HTML <title> 

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时,显示在收藏夹中默认的标题
  • 显示在搜索引擎结果页面的标题

3、HTML <link>  

  • <link>标签定义了文档与外部资源之间的关系。<link>标签通常用于链接到样式表。rel:定义当前文档与被链接文档的关系,type:定义被链接文档的类型,href:定义被链接文档的地址。
    • 引入外部CSS文件:<link rel="stylesheet" type="text/css" href="mystyle.css">
    • 定义标题的图标:<link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

4、HTML<style>

  • 添加内部样式表 

5、HTML<base> 

  • <base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
  • <base ref="www.baidu.com" target=""> 

6、HTML<script>  

  • <script>标签用于加载脚本文件

7、HTML<noscript> 

  • <noscript>元素用来定义在脚本未执行时的替代内容(文本)。此标签可被用于识别<script>标签但是无法支持其中的脚本的浏览器

四、HTML属性 

  • HTML元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"。

五、HTML路径

1、相对路径

  • 相对于文档的路径
    • ./ 当前目录
    • ../ 返回上级目录
    • / 下级目录

2、绝对路径

  • 固定不变的路径

六、HTML标签 

1、标签分类 

  • 行标签
    • 行内块标签——img,input,button,select,textarea,iframe
    • 行内(内联)标签——b,i,u,strong,em,ins,del,s,small,big,span,sup,sub,a
    • 一行可以出现多个,前后元素不会自动换行
  • 块标签
    • 自己独占一行,前后元素自动换行——h1-h6,p,div,ul,ol,li,dl,dt,dd,table,tr,caption,thead,tbody,tfoot,form.br,hr
  • 单标签
    • 空标签/自闭合标签——<br/><hr/><meta/><input/><img/><col/>

2、HTML的标题标签 

  • h1-h6,字体默认加粗,h1-h6,字体逐级减小
  • h1理论上一个页面中只出现一次,h2经量少用,h3可以多用

3、HTML段落标签 

  • <p> paragraph——p标签不可以嵌套p标签
  • <span> 文本标签  可以单独给部分元素设置样式

4、HTML的文本格式化标签 

  • <b> 定义粗体文本
  • <em> 表现为斜体字,定义着重文字,强调
  • <i> 定义斜体
  • <small> 定义小号
  • <strong>  表现为字体加粗,定义加重语气
  • <sub> 定义标字
  • <sup> 定义标字
  • <ins> 定义插入
  • <del> 定义删除
  • <s> 定义横线 

5、HTML"计算机输出标签"

  • <code> 定义计算机代码
  • <kbd> 定义键盘码
  • <samp> 定义计算机代码样本
  • <var> 定义变量
  • <pre> 定义预格式文本,原样输出

6、HTML引文,引用,标签定义

  • <addr> 定义缩写
  • <address> 定义地址
  • <bdo> 定义文字方向
  • <blockquote> 定义长的引用
  • <q> 定义短的引用语
  • <cite> 定义引用,引证
  • <dfn> 定义一个定义项目

7、HTML图片标签

  • <img> 标签定义HTML图像、图片
  • 属性
    • src:定义显示图片的地址
    • alt:文本替换 当图片无法无法加载显示的替代文字
    • title:鼠标移入到元素时,右下角提示的文本
    • width:定义图像的宽
    • height:定义图像的高
    • graggable:定义图像是否可以拖拽,默认false

8、HTML链接标签

  • <a> 标签定义网页中的链接
  • 属性
    • href:定义链接目标的URL地址
    • target:定义目标打开的位置(在哪个窗口打开链接)
      • _blank:新窗口打开
      • _parent:在父窗口中打开链接
      • _self:默认,当前页面跳转。
      • _top:在当前窗体打开链接,并替换当前整个窗体(框架页)。
      • frame_name:在指定的框架中打开
    • name/id 定义锚的名称——跳转到网页指定位置
    • download 指定下载的链接
  • 默认样式
    • 默认有下划线,鼠标移入指针 小手
    • 未访问的链接 字体蓝色
    • 已访问的链接 字体紫色
    • 点击链接 字体红色

9、HTML列表标签 

1、有序列表 

  • ol 定义有序列表 ordered list
  • li 定义列表项 list item
  • 属性
    • type 定义列表类型 1 A a I i        
    • start 指定列表编号的起始值 只针对于type="1"
    • reversed 倒序

2、无序列表

  • ul 定义无序列表 unordered list
  • ol 定义列表项 
  • 属性
    • type 定义无序列表的类型 disc cricle square

10、列表的嵌套

11、自定义列表

常用于图文列表

  • dl 定义自定义列表 definition list
  • dt 定义自定义标题 definition title
  • dd 定义自定义描述 definition description

七、HTML的表格

  • table 定义HTML表格
    • align 定义表格的水平对齐方式 left right center
    • bordor 定义表格的边框
    • cellspacing 定义单元格之间的间距
    • cellpadding 定义单元格与内容之间的间距
    • width 定义表格的宽
    • bgcolor 定义表格的背景色
  • tr 定义表格的行 table row
    • align 定义行中内容的水平对齐方式 left right center
    • valign 定义行内容的垂直对齐方式 top middle bottom baseline
    • bgcolor 定义行的背景色
  • td 定义表格的单元格 table datacell
    • align 定义单元格内容水平对齐方式 left right center
    • valign 定义单元格内容的垂直对齐方式 top middle bottom baseline
    • bgcolor 定义单元格的背景色
    • width 定义单元格的宽
    • colspan 跨列合并 向右合并
    • rowspan 跨行合并向下合并
  • th 定义表格的表头
  • thead 定义表格的页眉
  • tfoot 定义表格的页脚
  • tbody 定义表格的主体 默认生成
  • caption 定义表格的标题
    • align 定义标题的对齐方式 (left right在火狐浏览器) top bottom
  • colgroup 定义表格的列的分组
    • align 定义列内容水平对齐的方式 left right center
    • valign 定义列内容的垂直对齐方式 top middle bottom baseline
    • bgcolor 定义列的背景色
  • col 定义列的属性
    • span 定义跨的列数

八、HTML表单

  • form 定义供用户输入的菜单
    • name 定义表单的名称
    • action定义表单提交的地址
  • input 定义输入域
    • type 定义input元素的类型
      • text 默认。定义一个单行的文本字段(默认宽度为20个字符)
      • password 定义密码字段(字段中的字符会被遮蔽)
      • radio 定义单项按钮
      • checkbox 定义复选框
      • button 定义可点击的按钮(通常与JavaScript一起使用来启动脚本)
      • submit 定义提交按钮
      • reset 定义重置按钮(重置所有表单值为默认值)
      • image 定义图像作为提交按钮
      • file 定义文件选择字段和“浏览...”按钮,供文件上传
      • hidden 定义隐藏输入字段
    • name 属性规定<input>元素的名称
    • checked 属性规定在页面加载时应该被预先选定的<input>元素。(只针对type="checkbox"或者type="radio")
    • disabled 属性规定应该禁用的<input>元素
    • readonly 属性规定输入字段是只读的
    • size 属性规定以字符数计的<input>元素的可见宽度
    • value 指定<input>元素的value的值
    • width 属性规定<input>元素的宽度。(只针对type="image")
    • height 规定<input>元素的高度。(只针对type="image")
    • src 属性规定显示为提交按钮的图像的URL。(只针对type="image")
    • alt 定义图像输入的替代文本。(只针对type="image)
    • autofocus 属性规定当页面加载时<input>元素应该自动获得焦点
    • placeholder 属性规定可描述输入<input>字段预期值的简短的提示信息
  • textarea 定义文本域/多行文本框
    • autofocus 规定当页面加载时,文本区域自动获得焦点
    • cols 规定文本区域内可见的高度
    • rows 规定文本区域内可见的行数
    • name 规定文本区域的名称
    • placeholder 规定一个简短的提示,描述文本区域期望的输入值
    • readonly 规定文本区域为只读
    • disabled 规定禁用文本区域
  • select 定义下拉选项列表
    • name 定义下拉列表的名称
    • disabled 当该属性为true时,会禁用下拉列表
    • size 规定下拉列表中可见选项的数目
    • multiple 当该属性为true时,可选多个选项
    • autofocus 规定在页面加载时下拉列表自动获得焦点
  • option 定义下拉列表中的选项
    • disabled 规定此选项应在首次加载时被禁用
    • selected 规定选项(在首次显示在列表时)表先为选中状态
    • value 定义送往服务器的选项值
  • optgroup 定义选项组
    • disabled 规定禁用该选项组
    • label 为选项组规定描述/标题
  • button 定义一个点击按钮
    • name 规定按钮的名称
    • disabled 规定应该禁用该按钮
    • type 规定按钮的类型。button reset submit(默认)
    • value 规定当页面加载时按钮应当自动地获得焦点
  • fieldset 定义一组相关的表单元素,用框包起来
    • disabled 规定该组中的相关表单应该被禁用。
    • name 规定fieldset的名称
  • legend 定义<fieldset>元素的标题
    • id 定义名称
    • input 标签中使用list绑定id的值
  • datalist 指定一个预先定义的输入控件选项列表

九、HTML框架 

  • <iframe> 定义一个内联的frame 在一个浏览器窗口显示不止一个页面
    • frameborder 规定是否显示<iframe>周围的边框
    • src 规定在<iframe>中显示的文档的URL
    • width 规定<iframe>的宽度
    • height 规定<iframe>的高度
    • name 规定<iframe>的名称

十、HTML字符实体

1、常见的HTML预留字符(16)

2、常用的音标字符 (8)

3、完整的HTML预留字符(32)

4、HTML数字字符实体(38)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李学不完

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值