思维导图
常用标签
标签属性分类
css属性
块标签
定义：块标签独占一行，可以设置宽高，内边距，外边距等属性，默认为父容器的100%。
行标签
定义：不会独占一行，多个行标签可以在同一行显示，宽度由内容决定，不能设置宽高。
行内块标签
定义：结合了行标签和块标签的特性，可以像标签一样在同一行显示，可以设置宽高。
代码练习
标签练习
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="第一个网页" content="width=device-width, initial-scale=1.0"><link rel="icon" sizes="any" mask="mask.svg" href="https://www.baidu.com/favicon.ico"><title>标题</title></head><body><!-- 块标签（独占一行） --><div>第一行</div><div>第二行</div><h1>标题标签</h1><!-- h${内容}*6 --><h1>什么是快乐星球</h1><h2>什么是快乐星球</h2><h3>什么是快乐星球</h3><h4>什么是快乐星球</h4><h5>什么是快乐星球</h5><h6>什么是快乐星球</h6><p> 段落标签</p><p> 段落标签</p><ul>列表1</ul><ul>列表1</ul><ul>列表1</ul><ol>列表2</ol><ol>列表2</ol><ol>列表2</ol><li>列表项</li><li>列表项</li><li>列表项</li><!-- 行标签（水平方向排列） --><span>文字展示<sup>上标</sup></span><span>文字展示<sub>下标</sub></span><a href="https://www.msn.cn/zh-cn/news/other/%E6%96%B0%E5%9E%8B%E9%81%BF%E5%AD%95%E9%92%88%E9%97%AE%E4%B8%96-%E4%B8%80%E9%92%88%E7%AE%A1%E4%B8%A4%E5%B9%B4-%E5%8F%AF%E8%87%AA%E8%A1%8C%E6%B3%A8%E5%B0%84/ar-AA1Cul4I?ocid=msedgntp&pc=CNNDDB&cvid=67f5d8983bbd41beac63e683d90fd27d&ei=15">惊天大瓜<a><b>加粗</b><strong>加粗</strong><s>删除标签</s><del>删除标签</del><!-- 行内快 --><img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/launch/241126/plp/phones/new-241204/compare-huawei-mate70-pro-plus.png" alt="加载失败"><img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/launch/241126/plp/phones/new-241204/compare-huawei-mate70-pro-plus.png" alt="加载失败"><br><br><label for="zhanghao">账号:</label><input id="zhanghao" type="text" placeholder="请输入手机号"><br><br><label for="mima">密码:</label><input id="miam" type="password" placeholder="请输入密码" name=""><br><br><label for="">性别:</label><input id="" type="radio" name="xinbie">男<input id="" type="radio" name="xinbie">女<br><br><label for="">爱好：</label><input type="checkbox" name="aihao">旅游<input type="checkbox" name="aihao">游泳<input type="checkbox" name="aihao">看书<input type="checkbox" name="aihao">音乐<input type="checkbox" name="aihao">游戏</body></html>属性设置练习
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.hero-1{/* 背景颜色 */background-color: rgb(19, 255, 243);font-size: 16px;color: darkred;height: 100px;width: 500px; }.hero-2{background-color: cornflowerblue;}</style>
</head><body><div class="hero-1">美对华政策加征关税已超100%</div><br><br><span class="hero-2">【#对美二十多项反制合理合情合法#】</span><br><label class="hero-1" for="">名字：</label><input class="hero-2" type="text" placeholder="请输入文字名字"></body>
</html>页面练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.hero-1{font-size: 18px;background-color: burlywood;height: 600px;width: 500px;}.hero-2{color: crimson;}</style>
</head>
<body><div class="hero-1"><p>【#对美二十多项反制合理合情合法#】#美国妄图对各国各个击破# 美对华加征关税已经超过100%。中国人不喜欢施压和威胁，我们不惹事，也不怕事。消息人士告诉谭主，中方针对美威胁升级对华关税的回应，有两个信息点格外值得关注。</p><p>第一，要注意一个词，<span class="hero-2">“奉陪到底”</span>。</p><p>从2月1日美国政府开始逆势而动、加征关税之后，中国已经针对美国连续3轮采取了坚决反制措施。3轮下来，一共20多个反制措施。这些反制是被迫的，也是合理合情合法的。</p><p>第二，关于对话。</p><p>谈判的大门，我们当然没有关上，但绝不是以这种方式。</p><p>崔凡教授告诉谭主，当前，美国政府就是妄图与各国开展一对一双边谈判，利用优势谈判地位，各个击破。中国作为全球第一大贸易体，不示弱，不退让，本身就是向世界展现维护多边贸易体制的坚定决心，这也是中国的大国责任。</p><p>关税战就是发展之战。发展是世界各国的普遍权利，而不是美国的专利。我们要做的，是捍卫我们的发展权利，是捍卫我们的经济继续企稳向好。</p></div>
</body>
</html>简单网页制作：华为非凡大师参数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="https://consumer.huawei.com/content/dam/huawei-cbg-site/common/huawei-logo.png" type=""><title>HUAWEI Mate XT 非凡大师 参数</title><style>body{border-style: solid;border-width: 0.000000001px;background-color: rgb(255, 255, 255);}.h1{background-color: rgb(230, 230, 230);} .h1-div1{display: inline-block;vertical-align: middle;}.botton1{background-color: red;}.botton2{font-size: 20px;background-color: red;}.h1-div2{/* 让块标签变成行内块标签 */display:nline-block;float: right;vertical-align:middle;}.h2{border-style: solid;border-width: 0.01px; border-color: rgb(156, 151, 151);background-color: rgb(255, 255, 255);}.h2-div1{display: inline-block;vertical-align: middle;}.h2-div2{display:nline-block;float: right;vertical-align:middle;}.h3{text-align: center;vertical-align: middle;} .h3-div{text-align: center; margin: auto;}.h3-img{width: 200px;height: 300px;}.h3-p{display: inline-block;font-size: 20px;font-weight: 1000;color: red;}.h3-div-div{display: inline-block;}.h4{text-align: center;height: 500px;border:0.1px solid;background-color: rgb(255, 255, 255);}.h4-p{color: rgb(175, 175, 175);}.h4-div1{display: inline-block; vertical-align:top;}.h4-div2{ float: right;} .h4-div2-div2{width: 450px;height: 200px;display: inline-block;text-align: left;vertical-align:top;}</style>
</head>
<body><!-- 第一块 --><div class="h1"><div class="h1-div1"><a title="logo" href="https://www.huawei.com/cn/" data-nacicon="logo"><img src="https://consumer.huawei.com/etc/designs/huawei-cbg-site/clientlib-campaign-v4/common-v4/images/logo.svg" width="142" alt="Huawei-v4"></a></div> <div class="h1-div2"><input type="text"><button><span>搜索</span></button> <a href=""><span>个人中心</span></a><span></span></div></div><!-- 第二块 --><div class="h2"><div class="h2-div1">HUAWEI Mate XT 非凡大师</div><div class="h2-div2"><a href="https://www.vmall.com/product/comdetail/index.html?prdId=10086499369393&cid=92424360"><button class="botton1">购买</button></a></div></div><!-- 第三块 --><div class="h3"><h3>HUAWEI Mate XT 非凡大师</h3><div class="h3-div"><div class="h3-div-div"><img class="h3-img" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/phones/mate-xt-ultimate-design/specs/red.png" alt=""><p>瑞红</p></div><div class="h3-div-div"><img class="h3-img" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/phones/mate-xt-ultimate-design/specs/blank.png" alt=""><p>玄黑</p></div></div><p class="h3-p">价格：19999</p><a href="https://www.vmall.com/product/comdetail/index.html?prdId=10086499369393&cid=92424360"><button class="botton2">购买</button></a></div><!-- 第四块 --><div class="h4"><div class="h4-div1"><h3>尺寸与重量</h3></div><div class="h4-div2"><div class=".h4-div2-div1"><div class="h4-div2-div2"><h5>长度</h5><p class="h4-p">156.7 mm</p></div><div class="h4-div2-div2"><h5>宽度</h5><p class="h4-p">单屏态：73.5 mm</p><p class="h4-p">双屏态：143.0 mm</p><p class="h4-p">三屏态：219.0 mm</p></div></div><div class=".h4-div2-div1"><div class="h4-div2-div2"><h5>厚度</h5><p class="h4-p">单屏态：12.8 mm</p><p class="h4-p">双屏态：7.45 mm / 4.75 mm</p><p class="h4-p">三屏态：3.6 mm / 3.6 mm / 4.75 mm</p><p class="h4-p">*数据来自华为实验室，厚度不包含屏幕边框和摄像头模组外观。</p><p class="h4-p">**实际尺寸依配置、制造工艺、测量方法的不同可能有所差异。</p></div><div class="h4-div2-div2"><h5>重量</h5><p class="h4-p">约 298 g</p> <p class="h4-p">*上述宣称重量含电池，不包括屏幕表面层的重量，含屏幕表面层重量约 306 g。</p><p class="h4-p"> **实际重量依配置、制造工艺、测量方法的不同可能有所差异。</p></div> </div> </div></div>
</body>
</html>
