HTML与CSS学习|青训营笔记

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

微信图片_20220727113006.jpg

HTML篇

这是我结合在其他网站的学习对HTML内容的一些整理。

HTML标签学习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!--编码规范，删除会乱码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--标题标签:网页名字-->
</head>
<body>
 <!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr>  <!--分割线-->
<p>我是段落标签</p>
这是换行标签<br/>
    
<h2>文本格式化标签</h2>
<b>我加粗了</b>
<strong>我加粗了</strong>
<u>我有下划线</u>
<ins>我有下划线</ins>
<i>我倾斜了</i>
<em>我倾斜了</em>
<s>我有删除线</s>
<del>我有删除线</del>
<hr>
    
<h2>媒体标签</h2>
<div style="text-align: center;">
    <img src="路径" alt="我是替代文字" title="我是图片" width="300px"><br>
    <audio src="路径" controls loop></audio><br>
    <video src="路径" controls muted loop width="800px"></video><br>
    <a href="https://www.baidu.com" target="_blank">百度一下</a><br>
</div> 

<h2>列表标签</h2>
无序列表
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>
有序列表
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ol>
<dl>
    <dt>自定义列表</dt>
    <dd>广州</dd>
    <dd>上海</dd>
    <dd>北京</dd>
</dl>

<h4>表格标签</h4>
表格一
<table border="1" width="500px" height="150px" >
    <caption>分数表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr align="center">
            <td>小红</td>
            <td rowspan="2">18</td>
            <td>88</td>
        </tr>   
        <tr align="center">
            <td>小明</td>
            
            <td>86</td>
        </tr>
    </tbody> 
</table>
表格二
<table border="1" width="500px" height="200px">
    <caption>平均分数表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr align="center">
            <td>小明</td>
            <td>19</td>
            <td>86</td>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>18</td>
            <td>88</td>
        </tr>
        <tr align="center">
            <td>小强</td>
            <td>20</td>
            <td>90</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>平均值</th>
            <th colspan="2">88</th>
           
        </tr>
    </tfoot>
</table>

<h4>表单标签</h4>
<form action="">
昵称：<input type="text" placeholder="请输入可爱的昵称" value="" name="">
密码：<input type="password" value="" name=""><br>
性别：<label>
    <input type="radio" checked name="sex">男</label>
    <label><input type="radio" name="sex">女<br>
</label>
爱好：<label><input type="checkbox">吃饭</label>
    <label><input type="checkbox">睡觉</label>
    <label><input type="checkbox">打豆豆</label>
    <label><input type="checkbox">拉屎</label>
<br>
<input type="file" multiple></div><br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮"> 
<button type="reset">Reset</button>
<button type="reset"><img src="" alt="" width="50px"></button>
<br>
所在城市：<select name="" id="">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="" selected>广州</option>
</select><br>
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
<h2>语义化标签</h2>
<div>独占一行</div>
<div>aaa</div>
<span>一行显示多个</span>
<span>bbb</span>
<hr>
<h2>有语义布局的标签：</h2>
<header>头部</header>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>区块</section>
<article>文章</article>
<h4>字符实体</h4>
<div><a href="#">回到顶部</a></div>

</body>
</html>

总结

通过学习，我更加深入理解了HTML。对于HTML，需要掌握常用标签的格式和属性，在编写HTML代码时需要考虑到对应的语义。语义化的好处有：代码可读性、可维护性、搜索引擎优化、提升无障碍性。做到语义化，要了解每个标签和属性的含义，思考什么标签最适合描述这个内容，不使用可视化工具生成代码。

CSS篇

层叠样式表（Cascading Style Sheets），用来定义页面元素的样式。

CSS的工作原理

浏览器打开页面的时候，会加载页面的HTML进行渲染，解析出HTML的DOM树，同时加载出CSS并且解析CSS，然后浏览器会把DOM树的每个节点解析出来，再将对应的CSS样式渲染到DOM树里面，最终展示出设置好的效果。

CSS选择器

用选择器来选中要控制的内容，常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。并且选择器有优先级，优先级越高页面内容就会优先使用该选择器来控制页面内容。优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器。
选择器组合：

CSS求值过程

布局

布局常用的相关技术有三种，常规流、浮动、绝对定位。

HTML与CSS学习 ｜ 青训营笔记