【前端与HTML|青训营笔记】

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

一、什么是前端

解决图形界面下人机交互问题，前端工程师就是使用web技术栈解决多端图形用户界面交互的工程师

二、前端的技术栈分为

HTML：页面结构内容

CSS：页面样式

JS：网页行为

这三者通过网络协议传输到服务端

三、注意的问题

1.      功能

2.      美观

3.      无障碍

4.      安全

5.      性能

6.      兼容性

7.      体验感

四、HTML

HTML（HyperText Markup Language）：超文本标记语言，传达内容而不是样式。

一、小内容

1.<img src = “xxx”/> (src为属性名，“ ”内部包含的为属性值)
2.<！doctype html>开启标准模式，根据浏览器版本选择合适的渲染模式
3.<html></html>文档根标签
4.<head></head>页面原数据（标题、编码等）
5.<body></body>呈现内容
6.DOM树

二、HTML语法

1.      标签和属性不区分大小写
2.      空标签可以不闭合，如：input， meta
3.      属性值推荐使用双引号包裹
4.      某些属性值可以省略，如：required， readonly

三、基本标签

1.标题标签，分为6个，为h1-h6
2.列表标签，三类

（1）有序标签

<ol>
  <li>嘎嘎嘎</li>
  <li>水水水</li>
  <li>嘿嘿嘿</li>
</ol>

（2）无序标签

<ul>
  <li>嘎嘎嘎</li>
  <li>水水水</li>
  <li>嘿嘿嘿</li>
</ul>

(三)定义标签（多对多）

<dl>
    <dt>民主</dt>
    <dd>酷酷酷</dd>
    <dd>郭文韬</dd>
    <dt>学院</dt>
    <dd>666</dd>
    <dd>999</dd> 
</dl>

3.链接

<a href = “ https”>xxx</a>

4.多媒体
（1）图片：<img src = “ ” alt = “Metal movable type” width = “”/>
（2）音频：<audio src = “” controls></audio>
（3）视频：<video src = “” controls></video>

5.输入（表单）

<input type = “”>

<textarea>Hey</textarea>

6.选择

<lable><input type = “”></lable>（勾选）

<select>
    <option>*xxx*</option>
</select>（下拉选择）

7.内容整体划分

8.语义化（HTML中的元素、属性及其属性值都拥有某些含义）
例

（1）有序列表用ol；无序列表用ul
（2）lang属性表示内容所使用的语言

9.谁在使用我们写的HTML

(1）开发者：修改、维护页面
（2）浏览器：展示页面
（3）搜索引擎：提取关键字、排序
（4）屏幕阅读器：给盲人读页面内容

总结

学习了第一天的课程，了解了什么是HTML，对HTML的基本概念更加清楚。由于还处在小白阶段，写不了什么高大上的东西，希望经过一个月的学习能得到收获。我觉得目前最重要的还是了解HTML的标签，以及标签的合理使用，这样才能更快速地去写HTML的代码。