HTML基础----初识
2017-09-19 本文已影响0人
小白李呆呆
先看一下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），也为了代码的维护和阅读。
最后，一定要多敲代码，都敲出来在浏览器看看显示效果。
