HTML5总结

2022-07-05 16:02:47 阅读：115 来源： 互联网

目录
1.文档类型
2.字符集
3.标签
4.定位
5.特殊字符
6.路径
7.列表
8.属性
9.事件

1.文档类型<!DOCTYPE>

<!DOCTYPE html>
这句话就是告诉我们使用那个html版本。
只需要记住，看到上面这行代码，说明使用的是html5的版本。

2.字符集

<meta charset = "UTF-8">
utf-8是目前最常用的字符集编码方式，其他的还有gb2312(简单中文)，BIG5(繁体中文)，
GBK(全部中文字符)，UTF-8(全世界所有国家需要用到的字符！)。
这里只需要记录UTF-8。

注意：记住一点，以后我们统统使用UTF-8字符集，这样就避免出现了字符集不统一而引起乱码的情况了。

3.标签

标题标签

<h1>~<h6>
大小依次递减，注意没有<7>啥的，只有这六个！

文本格式化标签（熟记）

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记：

注意：推荐用哪一个，就是使用哪一个！因为上面的b 、i、s、u只有使用，没有强调的意思。

标签属性

例如：
<hr width="400">

1.属性采用的是“键值对”的形式，key = "value" 格式。
2.属性不分先后顺序！
3.任何属性都有默认值，忽略该属性则取默认值。

图像标签img

<img src = "图像URL" /> 注意：img是单标签和hr，br一样。

注意：以上几个属性必须牢记！！！

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
这里的a是单词anchor的缩写，意思是铁锚，锚。

1.href:用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
href全称Hypertext Reference.
提醒一下：
如果还不想添加url地址，可以使用" # "来代替一下。
这里的链接不仅仅可以添加网址还可以添加图片，影像之类的。
2.target:制定链接页面的打开方式，有两种取值，self和blank。
blank也可以写成" _blank "(固定写法)。
例如下面的百度链接就是用以下语句写的：
<a href="http://www.baidu.com" target="blank">百度链接</a>
百度链接

base标签

base可以设置整体的链接的打开状态。
在<head>中设定，也是有两个状态，self和_blank。

font标签

<font> 规定文本的字体、字体尺寸、字体颜色。</font>

标签换行

我们接触的很多标签都是默认换行的，像h1，p等都是默认换行的。

自然像span标签，b标签，form表单中的标签基本上都是不换行的。

table中的caption标签

表头标签要牢记，此外tr代表行，td代表纵。

select 和 option 标签

select和option标签组合为：下拉框。

div span标签

div就是division的英文，分割分区。
span是跨度的意思。
两个标签，最常用的，一定记住。

注释标签


注释一般都是给开发人员看的，用来标记一下内容或者代码的功能。

块级标签

默认独占⼀⾏，可以设置它的宽⾼；如果不设置，宽度会默认为它的⽗级元素的宽度。

  <div>...</div>  ⽆语义，就当做⼀个⼤盒⼦好了，是最典型的块级元素，⽹页中充满了各种div
  <h1>...</h1>　  标题标签，⼀共有六级标签，从h1----h6，有默认的⽂字⼤⼩以及加粗，h1最⼤，h6最⼩；
                  通常⼀个⽹页只有⼀个h1，⼀般是它的logo位置，⽤于突出其重要性
  <ul>...</ul>　　⽆序列表，⾥⾯只能放li标签（当然，你放别的标签⽹页也会给你显⽰，但是不建议这么做，不符合规范）
  <ol>...</ol>　　有序列表，在去除默认样式后，和ul⼀模⼀样，现在基本被ul取代了（可怜的娃）
  <li>...</li>    ul和ol⾥⾯只能放li标签；<li>标签⾥⾯可以放任意元素
  <dl>...</dl>　　⾃定义列表，⾥⾯只能放置<dt>和<dd>标签；<dt>和<dd>没有数量限制，但⼀般情况下就只放置⼀个<dt>,再放多个<dd>
  <dt>...</dt>　  放在<dl>内
  <dd>...</dd>　  放在<dl>内
  <form>...</form> 表单域，⽤来收集信息的页⾯，⼀般是注册页⾯之类的
  <tr/>           ⽔平分割线，是单标签

行内标签

默认由宽⾼由其内容撑开，直接设置宽⾼⽆效；⼀⾏可以放多个⾏内标签；
通常块级标签内可以放置⾏内标签，但⾏内标签⾥不能放块级标签
（< a>标签除外，a标签虽然是⾏内标签，但是它可以放块级标签，但是a标签内不能放a标签）

<span>...</span>    //与<div>相对应，是⼀个典型的⾏内元素，⽆语义，就当做是⼀个⼩盒⼦
<strong>...<strong> //加粗，写在标签⾥⾯的⽂字会加粗（同语义的还有<b>标签）
<em>...</em>        //倾斜，写在标签的⽂字会倾斜，其实没什么⽤，往往会⽤来加些⼩图标⽤，算是废物利⽤（同语义的还有<i>）
<del>...</del>　　  //删除线，（css中可以⽤  text-decoration: line-through;来实现）
<ins>...</ins>　    //下划线，（css中：  text-decoration: underline;)
<a>...</a>	        //a标签是超链接标签，⾥⾯必填的就是href属性，也是要跳转的⽹址，如<a href="https://www.baidu.com"></a>就会跳转到百度搜索页⾯，另⼀个常⽤属性就是target属性，	如果设定 target="-black",那么点击链接会新创建⼀个窗⼝再跳转
<a href="https://www.baidu.com" target="-black">百度⼀下</a>

4.锚点定位

通过锚点链接可以快速的定位到目标内容。
很好理解在a标签中加入了id的属性：
例如：
<a href="#biaoqian">定位到数字1那里去</a>
<a id="biaoqian">数字1</a>
这里很简单两个命令，就是通过href属性然后定位到了id的属性，很好理解。

5.特殊字符

注意：以上这些都是很常用的特殊字符。
其中：
1.空格的英文全称是no-break space。
2.小于号&It的英文全称是less than。
3.大鱼号&gt的英文全称是greater than。
4.其他符号自己搜寻一下就可以。

6.相对路径

这里一定要理解好和记住两个路径的格式用法！！！
容易忘记的是相对路径的第3条，一定要实操一下。
注意：本地的绝对路径最好不要使用，因为绝对路径一旦换电脑或者换地址，就over了。不过如果使用互联网上的图片绝对地址是可以的！
例如：
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
这里的地址就是百度图片的地址。

7.列表

无序列表ul

<ul>
<li>...</li>
<li>...</li>
	...
<li>...</li>
</ul>

下面就是通过使用上面格式表现出来：
李白
杜甫
注意：在ul标签里面除了li标签，最好不要使用其他的标签。或者将想要创建的标签放到li下面如下。 在这里插入图片描述

有序列表ol

<ol>
  <li>...</li>
  ...
  <li>...</li>
</ol>

下面就是通过使用上面格式表现出来：
苹果
香蕉

自定义列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
  <dd>...</dd>
  ...
  <dt>...</dt>
  <dd>...</dd>
  <dd>...</dd>
</dl>

这里dd标签是来解释dt标签的。
例如：

<dl>
  <dt>北京</dt>
  <dd>昌平</dd>
  <dd>通州</dd>
  <dd>顺义</dd>
</dl>

结果如下：
北京
昌平
通州
顺义

8.属性

input属性type="radio"用法和 label的for属性

单选按钮(单选框)：就是讲input的type属性赋值为radio。

首先，我们点击label标签中的内容，从而让input单选按钮被选中。

这就用到label中的for属性，来指向input的id值！

此外，必要时候，我们声明的name属性必须相同。

如果不设置 name属性和 value值会怎样？

我们设置完input等等标签后，提交参数，如果不设置name属性，他就不会传递参数。

如果设置了name属性不设置value值，那么它默认传出" on "的值来，也就是说name和value两个属性一定要设置！！！

input的type属性的reset 使用

input的type属性还有一个reset值，作用就是：重置表单。也是很重要的！

9.html 的事件

onchange HTML 元素已被改变。
onclick 用户点击了 HTML 元素。
onmouseover 用户把鼠标移动到 HTML 元素上。
onmouseout 用户把鼠标移开 HTML 元素。
onkeydown 用户按下键盘按键。
onload 浏览器已经完成页面加载。

标签：总结,...,标签,默认,HTML5,input,链接,属性
来源： https://www.cnblogs.com/Ericup/p/16446808.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9