HTML | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
前端解决的根本问题
- 解决多端下图形界面下的人机交互问题，用户使用PC浏览器、移动端APP或小程序以及VR设备打开前端界面交互会有不同；
- 产品有没有满足用户的需求；
- 安全性问题，如跨脚本攻击、CSRF安全漏洞等；
- 性能问题，如页面打开是否足够快；
- 兼容性问题，如网站在各种浏览器上是否可以正常使用。
HTML HyperText Markup Language
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
HTML语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
<!DOCTYPE>该声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。浏览器会使用它判断文档类型。
HTML部分常用标签
1. 有序列表和无序列表
<!-- 无序列表 -->
<ul><li></li></ul>
<!-- 有序列表 -->
<ol><li></li></ol>
ol和ul标签的子元素只能是li标签； 但li标签里面可以包含任何标签，且使用li标签时其父元素只能是ul或者ol。
2. HTML5音频/视频标签
- 视频
<video></video>
- 音频：嵌入音频 不同浏览器支持的音频类型可能不同，所以使用source保留音频类型
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
</audio>
- 或者：
<audio src="song.mp3" controls="controls"></audio>
- 常用属性controls，使用将会带上显示界面
<audio controls="controls">
3. 不同类型的input
- 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，住址等等。当然这也是Input的默认类型。
- 参数name：同样是表示的该文本输入框名称。
- 参数size：输入框的长度大小。
- 参数maxlength：输入框中允许输入字符的最大数。
- 参数value：输入框中的默认值。
<input type = "text" value = "提交"></input>
- 输入类型是password，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。
<input type = "password"></input>
- 作为文件file：选择上传文件，参数有name，size。
<input type = "password"></input>
- submit提交表单。
<input type = "submit" value = "提交"></input>
- checkbox多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择） 其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐）。value 值一般为true或false。
<input type = "checkbox" ></input>
- radio单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked。不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。
<input type = "radio" ></input>
- reset所有表单字段会重置回页面第一次渲染时各自拥有的值
<input type = "reset" ></input>
