HTML 是谁发明的:蒂姆·伯纳斯-李(李爵士)
HTML 起手应该写什么:
HTML 起手式格式
<!DOCTYPE html> # 告诉浏览器文档类型是 html
![e4db837279d487bd7201457255aca80e.png](https://i-blog.csdnimg.cn/blog_migrate/f247e630076d0ca52c681490b1e0cbc8.jpeg)
HTML 标签:常用的表章节的标签有哪些,分别是什么意思(h1~h6、section、article、main、aside 等等)
![424348f2a8e66f11eaa6a45ce062af4d.png](https://i-blog.csdnimg.cn/blog_migrate/a3bd4baa8a262956bdc5cee29bf7432d.jpeg)
© —— 版权标志©
Ctrl+Shift+L —— 美化格式
效果图:
![75f6ca64d1227f53a823b1d7451879e0.png](https://i-blog.csdnimg.cn/blog_migrate/318880beaf151fb5fbe3c3611bc39984.jpeg)
全局属性
![44a553be53e7fd34b516a185f0c9997f.png](https://i-blog.csdnimg.cn/blog_migrate/64b80a786fb8263aa2e49d652e8130f3.jpeg)
class # 设置某些参数
class="middle bordered" # 调整背景颜色、字体颜色和边框颜色
style{display:block; border: 1px solid red;}
.middle{
background: black;
color:white;
} # 调整背景颜色、字体颜色
.bordered{
border: 5px solid red;
} # 调整边框颜色
调整背景颜色、字体颜色和边框颜色
contenteditable # 让代码可以在网页上被用户编辑
<
放在 body 里面可以在网页上修改代码进行调整
![edc5a413f9353b402d23fa0fe1bfaa4b.png](https://i-blog.csdnimg.cn/blog_migrate/9a4a83cce0d64136a6aaf9f83d0941e3.jpeg)
hidden # 让标签内容隐藏
<
![e5af393a95aee50dbb8e0c870332a39c.png](https://i-blog.csdnimg.cn/blog_migrate/afb98b2c2376cdffbfaab7138ac7fc35.jpeg)
顶部广告不见了,但是可以用CSS进行修改回来看到
id # 定义了一个全文档唯一的标识符 (ID)。它用于在链接(使用片段)、脚本和样式(通过 CSS)中辨识元素。
注:不到万不得以,千万不要用id,因为id不报错,如果是全局唯一的就可以写id
样式:
[id=xxx]
#xxx{
}
![19e9f4f87c38f47ea531b6d6019faabc.png](https://i-blog.csdnimg.cn/blog_migrate/46878e0981a524fb013d4df9a8242943.jpeg)
问题:
在检查里面输入:window.
里面的所有单词不能使用,见下图
![52659d4713193a5d20190dbee734e75f.png](https://i-blog.csdnimg.cn/blog_migrate/1b73e7444d14224e2b9fdb53f99ecde3.png)
真的使用后里面的单词的话,解决方法如下图:
![06609cfd556810b61500c0ad1b298e28.png](https://i-blog.csdnimg.cn/blog_migrate/205a6229e5881148163607df3b33106e.jpeg)
style # 每一个元素可以写一个style属性
CSS 与 JS 里面同时存在style属性的话,以JS来呈现最终网页效果
![9ddf207ef7d781f23ec6a31b4191511c.png](https://i-blog.csdnimg.cn/blog_migrate/16e6284de8db72df8c9933a936c42bf1.jpeg)
tabindex # 用键盘来切换网页选项
tabindex=1
tabindex=2
tabindex=3
会按顺序选择
tabindex=1
tabindex=200
tabindex=3
会按数字大小选择
tabindex 有个特殊的值:0
tabindex=0
tabindex=200
tabindex=3
会按数字大小选择,0是最后一个
另一个是 -1
tabindex=-1
tabindex=200
tabindex=3
会按数字大小选择,-1不会去访问,不会选择
title # 显示完整的内容
在检查中加入下图的3行字
![14016748ba86aa9e5cd255b36ef86fbb.png](https://i-blog.csdnimg.cn/blog_migrate/402e9c2d4fd6dd47b1599e470af07eb4.jpeg)
或者在HTML上输入:
#xxx{
border: 10px solid yellow;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
输入to:e后按下Tab键,会转成
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
![50478e17856ca4764dd9c525def42540.png](https://i-blog.csdnimg.cn/blog_migrate/e604b632007a379c34b075a4ed7a00f2.jpeg)
默认样式不好用,最好自已新设置:
![c34022c8913f10a96aebaf26c70c35b3.png](https://i-blog.csdnimg.cn/blog_migrate/61ae6122e2db769b8425246a3bbb512c.jpeg)
<
table+ —— 按下Tab键: # 这段不好,用上面那段 table
<table>
<tr>
<td></td>
</tr>
</table>
鼠标三击左键可以全选一段代码
常用的内容标签有哪些,分别是什么意思(a、strong、em、code、pre 等等):
![c0d87ebc8f4726486bff68bb15e74f70.png](https://i-blog.csdnimg.cn/blog_migrate/6b70ed031a3d5720941840292bd110d7.png)
ol+ —— 按下Tab键:
<
ul+ —— 按下Tab键:
<
dl+ —— 按下Tab键:
<
pre —— 按下Tab键:
<
常用于标签:code
![d06fe7c2bc712cd015306ea11f9ec602.png](https://i-blog.csdnimg.cn/blog_migrate/adb12881c8e7b4f5852f7e96b3fe0039.png)
![1c64e8bda5f8ea23bdbd747032e6fea9.png](https://i-blog.csdnimg.cn/blog_migrate/c1cde6fbc2a3bd3ff378876c74a7e580.png)
hr —— 按下Tab键:
增加一条水平分隔线
br —— 按下Tab键:
<
a —— 按下Tab键:
<
![d2edd81c5ed9f0eb17eaf59a4f6fc110.png](https://i-blog.csdnimg.cn/blog_migrate/d1d1bb71f681201e1539aa9e54316b9a.png)
如果想控制的话,按装个Death To_blank插件:
https://chrome.google.com/webstore/detail/death-to-blank/gneobebnilffgkejpfhlgkmpkipgbcno/relatedchrome.google.comem —— 按下Tab键:
<
strong —— 按下Tab键:
<
quote —— 按下Tab键:
blockquote —— 按下Tab键:
<