先看一下HTML整体结构
首先创建一个以.html结尾的文件
注意:<!-、- --> 代表注释
<!DOCTYPE html> <!-- 文档声明,需要顶格书写 -->
<html> <!-- 全部内容,都需要放在这对标签里 -->
<head> <!-- 网页头部,对网页进行设置 -->
<meta charset="utf-8"> <!-- 设置网页编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置缩放,针对移动端 -->、
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- ie浏览器以最高版本渲染 -->
<title>初识网页</title> <!-- 设置网页标题 -->
</head>
<body> <!-- 网页主体,显示在网页上的内容 -->
这里放内容
</body>
</html>
相信看了上面这段代码,应该对HTML基本结构有了大致的了解。
那接下来我们看一下一些基本的标签
基本标签
注意,这里仅仅只展示了一小部分经常使用的标签
元素标签分为两类:
- 块级元素:独占一行,默认宽与父级宽相同
- 行内元素:元素之间排列在一行,不能设置宽高,由内容撑开。
一些块级元素
这里只列出了一些常用的
- 标题
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
...
<h6>这是六级标题</h6>
注:标题从一级标题到六级标题。
- 段落
<p>这是段落</p>
3.块级容器
<div>块级容器,没有默认样式</div>
- 表单
<form>...</form>
- 列表
<!-- 无序列表 -->
<ul>
<li>a</li>
...
<li>z</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>1</li>
...
<li>n</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>项</dt>
<dd>描述</dd>
...
</dl>
- 表格
<!-- 基本结构 -->
<table>
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</table>
一些常用行内元素
- 锚点
<a href="">...</a>
- 图片
<img src="" alt="">
注:img虽然是行内元素,但可以设置宽高
- 常用内联标签
<span>...</span>
标签语义化
在布局中,尽量使用带语义的标签,目的是为了搜索引擎更好的理解网页结构,提高排名(SEO),也为了代码的维护和阅读。
最后,一定要多敲代码,都敲出来在浏览器看看显示效果。
网友评论