菜鸟的复习之路——HTML基础篇

2021-06-20 11:31:52 阅读：181 来源： 互联网

一、HTML简介

首先，HTML是一种超文本标记语言，将内容包裹在各种不同的HTML标签中，由浏览器进行解析将内容呈现给用户。它是Web前端的主力内容，HTML不区分大小写。HTML文件的后缀名为".html"、".htm"。
HTML的版本号由<!DOCTYPE> 标签进行声明。目前最新的版本为HTML5。

HTML的常用标签有：

元素	说明
html标签	定义了整个 HTML 文档
head标签	元素包含了文档的元（meta）数据，以及title
title标签	描述了文档的标题
body标签	包含了可见的页面内容
h标签	标题标签，共有7个级别
p标签	段落标签
div标签	区块标签

详细元素可参考菜鸟教程>>>

二、HTML语法

HTML是一种标记语言，由 HTML 元素定义。主要用法就是用元素将内容包括起来，所以对大多数元素都是由两个标签——开始标签和结束标签构成。
注: 结束标签 需用“/”进行收尾。

一个基础的HTML页面：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<title>HelloWorld</title>
</head>
<body>
	<h1>HelloWorld</h1>
</body>
</html>

三、元素属性

在HTML语言中基本上每个元素都拥有属性，属性又分为全局属性和私有属性，顾名思义，全局属性是每个HTML元素都具有的，而私有属性是元素本身独有的。属性一般描述于开始标签，形式一般为键值对如class=“nav”。

常见属性：

元素名	属性和值	作用
p	class =“firstP” （全局）	为该元素赋予指定类的相关设定
div	height=“10px” （全局）	定义元素的高度单位可为px、em等
p	color=“red” （全局）	规定文本的颜色
a	href=“baidu.com” （私有）	定义超链接的地址
div	data-name=“张三” （全局）	HTML5新属性，用于存储页面的自定义数据

详细属性信息可参考菜鸟教程>>>

四、HTML对文本的处理

1. 标题类
标题类由h元素标记，分为7个等级数字越小字体越大。

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<h7>我是七级标题</h7>

2. 段落
段落由p元素标记。每个p标签占一行。

<p>这是一个段落 </p>
<p>这是另一个段落</p>

3.文本格式化
文本个格式化分为加粗、斜体、上下标等。

<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>

五、CSS层叠样式表

1. CSS简介

CSS样式定义了如何显示 HTML 元素，它通常存储在样式表中，样式表分为内部和外部两种。外部样式表可以极大提高工作效率，方便修改，文件以.css结尾。内部样式表可以包裹在Style标签中，也可以写在元素的style属性中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HelloWorld</title> 
<style>
p{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>我是内部样式</p>
<h1 style="clolr:yellow;">我是行内样式</h1>
</body>
</html>

CSS层叠样式表的出现，使得HTML更加美观易用，它与HTML相辅相成，可直接在对HTML 元素的属性进行修改，开发简单。

2. CSS用法
除行内样式表外，CSS需要使用选择器对HTML元素进行选中，选择器分为id 和 class 选择器,元素选择器等。常见形式由：“#id”，“.class”。
对元素进行选中后，将所要设置的属性卸载大括号中。

.p{
	color:red;
	text-align:center;
}//类选择器

3. CSS属性
常用的css属性有：

属性名	值	作用
background	#000000	背景颜色或图片
display	none/block	元素不可见/可见
border	5px solid red	设置四个边框的样式

详细属性信息可参考菜鸟教程>>>

六、HTML布局

HTML主要由两大布局模式，table 表格布局和div 模块布局。

1. table 表格布局
table元素进行布局时，页面相对整齐，比较容易对齐，主要适合登录页面。
table元素下主要有tr行标签，td单元格组成

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>

2. div 模块布局
相对与table布局，div更为灵活，浮动、嵌套、让网页更有层次感。为适应多端屏幕尺寸的变化，更多采用div布局。

<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>

七、HTML表单

表单可以收集用户所提交的信息，并将内容以网络协议传到服务器中。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签来设置。

八、总结

以上为html基础知识的复习。部分内容复制于菜鸟教程。
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 的关键是标签，其作用是指示将出现的内容。
以及CSS层叠样式表的使用等。
本期文章到此结束，下期将对HTML5的新特性进行复习以及Javascript、jQuery的复习。

点此查看—菜鸟的复习之路——HTML进阶篇（上)

标签：复习,菜鸟,元素,HTML,标签,文本,CSS,属性
来源： https://blog.csdn.net/qq_42275943/article/details/107280411

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9