这是我参与「第四届青训营 」笔记创作活动的的第1天
前端工作——图形界面下的人际互动
HyperText --图片链接表格标题 Markup Language 用一个标签来 表示一段内容
标签实例<h1>标签实例<h1/>
<!--标记当前html文件是什么样版本，来决定使用的渲染模式，没有这个会造成页面展示效果不符合预期效果-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>页面标题标签</title>
</head>
<body>
<!--页面内容-->
<h1>一级标题标签</h1>
<p>段落标签</p>
</body>
</html>
语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta，但是推荐闭合
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
几种常见基础标签
- 标题标签 h1-h6
2.列表标签
-
有序列表ol
-
无序列表ul
-
自定义列表dl
-
子级标签
-
dt自定义列表标题
-
dd自定义列表内容
多对多的关系
3.链接标签
<a href="#" target="_blank">链接</a>
href属性值表示跳转对象，target="_blank"表示在新标签页打开该链接 4.多媒体标签
- 图片标签
<body>
<h4>图像标签的使用</h4>
<img src="img.jpg" width="50" height="100"/>
<h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
<img src="img1.jpg" alt="图片无法显示" />
<h4>title 提示文本 鼠标放到图像提示的文字</h4>
<img src="img.jpg" alt="图片无法显示" title="这是图片的提示信息" />
</body>
解释说明 alt属性值 替换文本 图像显示不出来的时候用文字替换 title属性值 提示文本 鼠标放到图像提示的文字
- 音频标签
<audio controls="controls">
<source src="file.mp3" type="audio/mp3" />
<source src="file.ogg" type="audio/ogg" />
</audio>
controls表示显示浏览器的控制控件，进度条和播放按钮等
- 视频控件
<video controls="controls">
<source src="file.mp4" type="video/mp4" />
<source src="file.webm" type="video/webm" />
<source src="file.ogv" type="video/ogg" />
</video>
同音频标签类似
5.表单标签 是给用户提供输入的标签类型 表单实例
<form action="xxx.php" methe="get">
<!--label标签应用于绑定一个表单元素，当点击<label></label>标签内的文本时，浏览器就会自动将光标、焦点
转到或者选择对应的表单元素上，增加用户体验-->
<!--核心：<label></label>标签的佛如属性应当于相关元素的id属性相同-->
<label for="username"> 用户名: </label><input type="text" name="username" value="请输入用户名" maxlength="10" id="username"/><br />
<label for="pwd"> 密码:</label><input type="password" name="pwd" id="pwd"/><br />
<!--type属性是input标签必须写的属性-->
<!--radio是单选按钮实现多选一-->
性别:<label for="man">男</label><input type="radio" name="sex" value="男" id="man"/>
<label for="woman">女</label><input type="radio" name="sex" value="女" checked="checked" id="woman"/><br />
<!--checked属性（单选框和复选框），当页面打开时默认选中当前按钮-->
爱好：吃饭<input type="checkbox" value="吃饭"/> 睡觉<input type="checkbox" value="睡觉"/>
<!--maxlength是表单元素最大输入字符数--><br />
<input type="submit" value="免费注册" />
<!--点击提交按钮可以把表单域from里表单元素的值提交给后台服务器-->
<input type="reset" value="重新填写"/>
<!--重置按钮可以还原表单元素的初始默认状态-->
<!--普通按钮button结合js使用-->
<input type="button" value="获取短信验证码"/><br />
上传头像：<input type="file" />
<input type="date" />
<!--给用户提供日期选项-->
<textarea></textarea>
<!--文本框-->
</form>
</body>
input常见属性总结：
-
type： button 普通按钮button结合js使用
reset 重置按钮可以还原表单元素的初始默认状态
checkbox 复选框
radio 单选按钮
text 文本
password 密码，输入内容会被遮盖
date 给用户提供日期选项
submit 点击提交按钮可以把表单域from里表单元素的值提交给后台服务器
-
checked="checked" checked属性（单选框和复选框），当页面打开时默认选中当前按钮
input 提供下拉选择提示，并不会限制用户自由输入
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
<!--输入文本提供下拉选项-->
6.文本标签
<blockquote cite="http://t.cn/Rfjko0F">
<p>天才并不是自生自长在深林荒野里的怪物，是由可以
使天才生长的民众产生、长育出来的，
所以没有这种民众就没有天才</p>
</blockquote>
<!--块引用-->
<p>我最喜欢的一本书是 <cite>小王子</cite>。</p>
<p>在 <cite>第一章</cite>，我们讲过 <q>字符串是不可变量</q>。</p>
<p><code>const</code>声明一个只读的常量</p>
<!--短引用，q和cite的区别，cite一般是作品名字或者章节的引用，q一般是具体内容-->
<pre><code>
const add =(a,b)=>a+b;
const multiply = (a,b) => a * b;
</code></pre>
<!--提到代码，可以用code引起来，引用多行代码，再用pre标签引起来-->
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>
<!--<strong></strong>标签内内容表示重要重点内容，重要性严肃性-->
<!--<em></em>表示对内容强调，更偏向于语气上-->
</body>
- blockquote元素表示块引用，可以带有位于footer或者cite中的内容，也可以带有批注和缩写等行内更改
- q和cite元素表示短引用，q和cite的区别，cite一般是作品名字或者章节的引用，q一般是具体内容
- code元素中内容部分可以放代码内容，引用多行代码可以把code元素内嵌在pre元素中
- strong标签内内容表示重要重点内容，重要性严肃性
- em表示对内容强调，更偏向于语气上
语义化
1.开发者遵循语义地编写HTML，有利于
- 协作，在修改维护页面时，通过标签元素容易地get到当前内容
- 浏览器展示页面，通过相应的标签元素浏览器能够按照预期地展示页面
- 有利于搜索引擎抓取页面时，通过关键词建立索引和排序，比如搜索同样的内容，内容出现在标题元素和段落元素的权重是肯定不一样的
- 无障碍，比如屏幕阅读器，如果页面的开发没有遵循语义化，就没办法按照预期的顺序阅读。
2.语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
HTML是传达内容，而不是传达样式
3.如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
