什么是前端
简单来说，就是利用web技术栈，解决多端和人机交互问题。
前端技术栈
- HTML：网页结构，以传达内容为核心
- CSS：页面样式
- JS：网页行为
- 通过网络协议（http）与服务器端相连
前端技术所关注的问题
功能、美观、无障碍（所有人群）、用户安全、性能、兼容性（多设备）、用户体验……
简单来说,就是要站在用户的角度进行开发。
HTML常用标签
基本格式
<html> //包括所有HTML标签
<head> //放页面的元数据
<style>a{text-decoration: none;}</style>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
1. 标题标签
< h1>~< h6 >
2. 文本标签
- < p >段落标签
- < br >换行标签
- < b >加粗
- < i >斜体
……
3. 列表标签
- < ol >< li >有序列表
- < ul >< li >无序列表
- < dl >< dt >定义列表
- < div >定义块级元素，< span >实现行内块的定义
……
4. 超链接
< a > 为超链接标签
< a href="" > 为网页链接； audio为音频；video 为视频；controls代表使用浏览器默认播放控制台。
< img scr="">为图片链接。
<div id="post">
<img src="2.png" width="65%"/>
</div>
<div id="poss">
<h1>热播推荐</h1>
<li>
<h2><ul><a href="https://v.qq.com/x/cover/mzc002000xg1sad.html"> 大考</a> </ul></h2>
<ul><a href="https://v.qq.co……"> 中国好声音2022</a> </ul>
<ul><a href="……"> 我们这十年</a> </ul>
<ul><a href="……"> 独行月球</a></ul>
<ul><a href="……"> 中餐厅6</a> </ul>
<ul><a href="……"> 长津湖之水门桥</a> </ul>
<ul><a href="……"> 两个人的小森林</a> </ul>
<ul><a href="……"> 庆祝党的二十大</a> </ul>
</li>
</div>
5. 表单
单行文本框：< input type="text" name="" size="" />
单选按钮：< input type="radio" name="" value="" />
列表选择框：< select >< option >内容< /option >< /select >
……
请输入用户名：<input type="text" name="" size="" />
<br />
选择最爱的水果
<input type="radio" name="flute" />苹果
<input type="radio" name="flute" />梨
<input type="radio" name="flute" />草莓
<input type="radio" name="flute" />桃子
<br />
选择喜欢的几部电影
<input type="checkbox" name="film"/>疯狂动物城
<input type="checkbox" name="film"/>爱宠大机密
<input type="checkbox" name="film"/>长津湖
<input type="checkbox" name="film"/>流浪地球
<input type="checkbox" name="film"/>阿凡达
<br />
请选择省份：
<select name="country">
<option>山东</option>
<option>浙江</option>
<option>云南</option>
</select>
</body>
语义化
语义化可以增加代码可读性、可维护性、无障碍性，优化搜索引擎，等等。我们应该学习并遵循标签语义来写， 比如有序列表用ol，无序用ul，尽量不使用自动生成代码工具。
总结
HTML中标签繁多，需要课后自学并在设计网页时逐渐积累学习不同的标签。
