这是我参与「第四届青训营 」笔记创作活动的的第1天
HTML和前端
前端不仅要关注技术,还要关注功能、美观、无障碍、安全 electron、webGL
1.什么是HTML?
HyperText Markup Language,HTML不是一门编程语言,而是一种告知浏览器如何去阻止页面的标记语言,用标签来表示。由一系列elements组成。
img等一些里面无需嵌套内容可以省略结束标签
[1] doc type
<!DOCTYPE>
这个声明并不是一个HTML标签,而是用来告知Web浏览器页面使用的html版本
[2] head标签内部
放一些页面的元数据,页面的编码、标题
[3] body标签内部
放一些用户可见的内容
2.HTML页面渲染和标签
浏览器会对html进行解析,html解析器将html文本解析成一颗dom树
[1]列表相关标签
- ol——ordered list
- ul——unordered list
- dl/dt/dd——data list?data title?data data
[2]链接标签
a标签,href指定跳转链接,新建页面跳转target=“_blank”
[3]多媒体标签
浏览器多媒体标签中属性加入controls才会显示多媒体的控制按钮
[4]输入标签
- input标签/textarea标签
一些常用属性 【placeholder】提示 【type】date/number/textarea/range(滑块)/password
- select-options 下拉选择菜单
- checkbox 复选框
- radio 单选框
[5]文字展示标签
- blockquote-长引用标签
- p-段落标签
- cite-规定引用来源
- code-代码标签
- pre+code-多段代码标签
<!-- 单行: -->
<code></code>
<!-- 多行 -->
<pre>
<code></code>
</pre>
<pre>标签用来定义与格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符,是一个块级元素,<code>是一个行内元素,用<pre>包裹<code>来展示多行代码
- strong-强调
- em-一句话中突出表示的一个词
3.html里为什么需要这么多标签,标签起到了什么作用?
语义化:
- 元素、属性和属性值都拥有某些含义
- 开发者应遵循语义来编写HTML
html语法的一些小tips:
- 标签和属性不区分大小写,推荐小写
- 空标签可以不闭合必入input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略,required、readonly