2.1 HTML5文档结构:
- HTML5文档结构包括头部(head)、主体(body)两大部分。
2.1.1<!DOCTYPE>声明
引用官方的DTD文件,在HTML5之前版本,如xHTML、HTML4.0都有官方的DTD文件引用,DTD是文件类型定义,主要对标签的使用进行定义。基于HTML5“化繁为简”准则,不需要引用严格意义上的DTD规范,只需引用<!DOCTYPE html>代码即可。
2.1.2 <html>标签
html文档的根元素,成对出现,代表文档的开始和结束。
2.1.3 <head>标签
<head></head> 文档的头部标签,为所有头部元素的容器,<head>中元素可以引用脚本、指示浏览器在哪里找到样式表,提供元信息等
<title></title> 用于定义文档标题,只能出现在<head>中 <meta> 用于定义html元数据 <link rel="stylesheet" href=""> 引用外部文件标签,通常放置在头部标签<head>中,用于连接外部CSS资源文件
<style></style> 为内嵌样式标签,位于<head>中,用于定义内部CSS样式
2.1.4<meta>标签
设置页面关键字——用于告诉搜索引擎网页的关键字
<meta name="keyword" content="某人,论坛,学历,前端">
用于告诉搜索引擎网站的主要内容 <meta name="description" content="web前端的一些面试技巧">
用于介绍作者的一些信息 <meta name="author" content="某人,邮箱"> 设置网页的定时跳转 <meta http-equiv="Refresh" content="";URL=""> /*content后跟值为当前页面在多少时间跳转,URL值为跳转到具体的网页网站*/
2.1.5 <body>标签
body标签是HTML的主体部分,网页所需显示内容都放在该标签内。
2.2 HTML5标签、元素及属性
HTML网页实际由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。
HTML元素就是通过HTML标签进行定义的。
2.2.1标签
1.单标签
<br> 换行 <hr> 创建一条水平线 <meta> 元素可提供有关页面的元信息 <img src="" alt=""> 图片标签,用于页面插入图片
2.双标签
<h1></h1> 标题标签 <p></p> 段落标签 <ul></ul> 无序列表标签 <table></table>表格标签
3.
- 标题标签:<h1>-<h6>,<h1>标签代表1级标题,级别最高,文字最大其他标签依次递减;
标题字对齐属性:align
center: 居中对齐;
left: 左对齐内容;
right: 右对齐内容;
justify: 对行进行伸展,每行都可有相同长度
- 段落标签:<p>
- 换行标签:<br> 将文字在一个段内强制换行,一个<br>代表换行一次
- 不换行标签:<nobr> 不换行内容放在<nobr><nobr/>之间;<nobr><nobr/>之间遇到<br>换行标签,内容将自动换行;
- 水平线标签:<hr> 将上下内容分隔开
- 插入空格:
- 插入特殊字符:“&”开头,“;”结尾,中间加上特殊字符对应编码即可,特殊字符对应编码链接: https://www.jb51.net/onlineread/htmlchar.htm
2.2.2 标签属性
- <标签名 属性名1=“属性值1” 属性名2=“属性值2” ……>内容部分</标签名> 两个不同的属性之间不需要分号
- <p style="color:red;font-size:20px;background-color:white"> style属性中的不同设置需要分号
-
2.2.3 元素
<p>HTML</p> 开始标签到结束标签所有代码,为HTML元素
位于起始标签和结束标签之间的文本为HTML元素内容
行内元素和块级元素区别
块级元素:独占一行,表现为另起一行,而且其后元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)、外边距(margin)都可控制。
行内元素:和相邻的行内元素在同一行显示,宽度(width)、高度(height)、内边距padding-top/padding-bottom和外边距的margin-top/margin-bottom都不可改变,但是内边距的padding-left/padding-right和margin-left/margin-right等属性都可以设置。
浏览器还有默认的行内元素,<img> 、<input>、<button>等,有内在尺寸,可设置宽高,但不会自动换行。