今天小编学习html语言的第一天，用来记录html中的语言标签，小白可以通过本文，跟小编一起学习html（超文本语义标签）
在html语言中有头部、内容、底部三大版块，下面我们来简单讲解一下html
html学习
这里给大家一个简单实例 认识一下html有那些标签，这些标签都是干什么用的？
<!-- 文档类型 -->
<!DOCTYPE html>
<!-- 根元素 -->
<html lang="zh-CN">
<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>html文档结构</title>
</head>
<body>
<!-- 这里才是用户真正关注的内容 -->
</body>
</html>实列代码中的注释文字可以清晰描述这些标签是干什么用的
常用布局标签
这里我们重要关注<body>到</body>里的部分就可以；我们在<body>到</body>里会把网站分成三部分 头部、内容、底部；常用以下标签写在<body>到</body>中。
<!-- 经典 -->
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
<!-- id权重太大 -->
<!-- 改进 -->
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
<!-- class权重小于id,有利于样式复用 -->
<!-- 语义化布局标签 -->
<header>header</header>
<main>main</main>
<footer>footer</footer>
绝大多数程序员还是喜欢 div + class 模式列如：
<!-- div + class -->
<div class="article-header">我是文章头部</div>
目前至少90%以上的项目是基于移动端,不依赖或不在乎搜索引擎；完全是个人习惯,主要原因是这种布局的语义化标签太少了,不如语义更明确的class
链接与图像
链接跳转
在html中<a>用于网站链接跳转列如：
<!-- 跳转到站外 -->
<a href="https://www.jd.com">京东</a>指定网址跳转列如：
<!--在指定的窗口打开 -->
<a href="https://zydown.com" target="tmall">当下资源网</a>
<iframe frameborder="2" name="tmall"></iframe>站内跳转列如：
<!-- 站内跳转 -->
<!-- 使用锚点/书签来实现 -->
<a href="#hello">我要找到你</a>图片链接
<!-- 可点击的图片链接 -->
<a href=""><img src="dog.jpg" alt="dog" /></a>
<!-- 可点击的文本链接 -->
<a href="">今晚有肉吃了</a>
列表与导航
- 有序列表：
<!-- 1. 有序列表 ,极少用,如果要用请求无序列表+css代替它--> <h3>东京奥运奖牌榜</h3> <ol> <li>美国:113</li> <li>中国:88</li> <li>日本:58</li> </ol>
- 无序列表：
<!-- 2. 无序列表 -->
<h3>购物车</h3>
<ul>
<li>笔记本电脑一台</li>
<li>蓝牙耳机一副</li>
<li>卫生纸10卷</li>
</ul>- 自定义列表：
<!-- 3. 自定义列表 -->
<dl style="display: grid; grid-template-columns: 3em 16em">
<dt>地址:</dt>
<dd>合肥市</dd>
<dt>邮箱:</dt>
<dd>2877741347@qq.com</dd>
</dl>- 导航列表：
<!-- ul + li + a -->
<ul class="menu" style="display: flex; place-content: space-around">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">教学视频</a></li>
<li class="item"><a href="">社区问答</a></li>
<li class="item"><a href="">资源下载</a></li>
<li class="item"><a href="">关于我们</a></li>
</ul>
<!-- nav + a -->
<nav class="menu" style="display: flex; place-content: space-around">
<a href="">首页</a>
<a href="">教学视频</a>
<a href="">社区问答</a>
<a href="">资源下载</a>
<a href="">关于我们</a>
</nav>表格与布局
<!-- table + caption + thead + tbody + tfoot -->
<!-- tr + td -->
<table width="300" border="1">
<!-- 标题 -->
<caption>
表格标题
</caption>
<!-- 表头 -->
<thead>
<tr bgcolor="lightgreen">
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</thead>
<!-- 表格中的所有数据必须放在单元格td的元素中,必须写到tr中 -->
<!-- 表格主体 -->
<tbody>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<!-- 从表体2行3列开始水平方向合并3列 -->
<td bgcolor="red" colspan="3">x</td>
<!-- <td>x</td>1
<td>x</td>2 -->
<td>x</td>
</tr>
<tr>
<td>x</td>
<!-- 在第3行进行垂直方向/行方向合并2个单元格 -->
<td bgcolor="violet" rowspan="2">x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<!-- 注意2点: 合并操作一定是发生在单元格上td元素, -->
<!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 -->
<tr>
<td>x</td>
<td>x</td>
<!-- 这一个单元格应该被注释或删除 -->
<!-- <td>x</td> -->
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
<!-- 可以有多个tbody表格主体 -->
<!-- 表尾 -->
<tfoot>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tfoot>
</table>
内联框架标签
<h2><a href="https://zydown.com" target="dx">当下资源网</a></h2>
<iframe srcdoc="<em>点击上面的链接打开</em>" frameborder="1" width="400" height="400" name="dx"></iframe>今天html学习就分享到这里。
声明：本站提供的一切软件、教程和内容信息都来自网络收集整理，仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，版权争议与本站无关。用户必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
