头一天预习，看了看html 确实有些东西｜青训营笔记青训营有感，这个摘要不能自动获取吗，体验感有点差。简单说两句吧，

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

培训总结

概念

前端

解决人机交互问题

跨终端

pc/pe

客户端/小程序

vr/ar

利用web技术栈解决多端的人机交互问题。

技术栈

html定义内容，css规定样式，js控制行为，通过网络协议和服务器进行渲染用户通过浏览器提交到服务器端

需要关注功能、美观、无障碍（是不是针对所有人）、安全、性能、兼容、体验

html

<!doctype html> <!-- 标记版本,浏览器根据他选择渲染模式，不写的话，使用默认模式渲染，可能导致差异 -->
    <html>
        <head> <!-- 存放编码，标题 -->
            
        </head>
        <body> <!-- 存放代码 -->
            
         </body>
    </html>

文件被解析时，会产生一个Dom树(树形结构)，根节点是延伸出和，根据他们的内容再分别延伸。其中的内容就是dom节点(所以里面的节点都是可以获取的。。

html语法

标签和属性不区分大小写，推荐小写

空标签可以不闭合，比如 input mate(类似单标签和闭合标签的区别)

<input type="text">
<input type="text" />

属性值推荐使用双引号

某些属性值可以省略

html标签

h标签

浏览器自带简单样式供给我们排版，但是更重要的其实是标签的语义化。

列表 ul ol dl

有序列表 ol (一般不用，因为不好控制)

<ol>
    <li>1</ol>
    <li>1</ol>
    <li>1</ol>
    <li>1</ol>
</ol>

无序列表 li

<ul>
    <li>1</ol>
    <li>1</ol>
    <li>1</ol>
    <li>1</ol>
</ul>

定义列表 dl (dt是表头 dd是内容)

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

链接 a

超链接也成为锚链接标签是a 双标签，中间放链接展示的内容，可以是图片、按钮或者文字等。

href 跳转地址

target 新页面打开方式 _blank 新页面打卡 _self替换父页面打开默认是self 还有两个打开方式但是不常用

<a href="www.baidu.com" target="_black">

图片音频视频

图片 img

src 表示地址

alt 图片未加载时替代文本

音频 audio

src 音频的url

controls 播放控件

视频 video

src 音频的url

controls 播放控件

输入 input textarea

input 表单

type 属性规定input展示成什么样子可选 text 文本 password 密码框 range 滑动块 radio 单选框 date 日期框 number 数字框 checkbox 多选框默认是text number类型可以设置min max 设置最大最小值

placeholder 默认值

<input type="password">
<!--单选框和多选框都是通过name来区分选项的，并且通过value来获得选择的值 -->
<input type="checkbox" name="chek" value="选项一">多选框
<input type="checkbox" name="chek" value="选项二">多选框
<input type="checkbox" name="chek" value="选项三">多选框

<input type="radio" name="chek" value="选项一">单选框
<input type="radio" name="chek" value="选项二">单选框
<input type="radio" name="chek" value="选项三">单选框

textarea 多行文本

select下拉选择

<select>
    <opactiy>选项</opactiy>
    <opactiy>选项</opactiy>
    <opactiy>选项</opactiy>
    <opactiy>选项</opactiy>
    <opactiy>选项</opactiy>
</select>

datalist

案例 input配合datalist 设置输入帮助

需要id和input的list对应才行，且可以一对多

<input list="countries">
<datalist id="countries">
    <option>1.舔狗</option>
    <option>2.大舔狗</option>
    <option>3.终极舔狗</option>
    <option>4.战狼</option>
</datalist>

以下是文本标签

快捷引用 blockquote

cite 设置来源

<blockquote cute="https://hanyu.baidu.com/sentence/search?from=aladdin&gssda_res=%7B%22sentence_type%22%3A%22%E5%90%8D%E8%A8%80%22%7D&query=%E5%90%8D%E4%BA%BA%E5%90%8D%E8%A8%80&sentence_type=&smpid=&srcid=51328&tab_type=&wd=%E5%90%8D%E4%BA%BA%E5%90%8D%E8%A8%80&ret_type=sentence-multi">
<p>自古皆有死，民无信不立。——孔子</p>
</blockquote>

短引用 cite q

q自带样式是双引号 cite是倾斜加粗

<cite>小王子</cite>
<q>短歌行</q>

表示代码 code

<code>
    const i = 100
</code>

表示内容比较重要 strong

<strong> 千万别做舔狗。 </strong>

语气强调 em

你给我<em>小心</em>点！

内容标签

以下是板块划分标签一一对应即可

header 头部标签

nav 导航标签

main 正文标签

footer 尾部标签

article 文章标签

什么是语义化？

给各种标签弄各种含义。

语义化为了什么？

seo优化，便与爬虫抓取，也是定制一些标准，搞新人。要遵循语义编写html 尤其是h标签。

为了正义，为了标准，为了提升自己代码的规范。

说实话，哥们在开发的时候，很少兼顾语义化标签，一般都是div出一片天，确实也是没有注意自己的编码规范，要改，痛定思痛，要提升自己编码水平的途径之一就是写出一手规范的代码！同志们，一起加油。

头一天预习，看了看html 确实有些东西 ｜ 青训营笔记