HTML语法介绍

1.HTML介绍

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

语法:

标签使用< >为标志,标签名不区分大小写,推荐小写表示
分类:
双标签:成对出现,包含开始标签和结束标签。例:

<html></html>

单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。例:

<br>
<br/>

标签属性:
标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效
果。由属性名和属性值组成,属性值使用双引号表示。例:

<meta charset="utf-8">

同一个标签中可以添加若干组标签属性,使用空格间隔。例:

<img src="lily.jpg" width="200px" height="200px">

3.使用

1. 创建网页文件,使用.html或.htm作为文件后缀
2. 添加网页的基本结构

<!doctype html>
<html>
<head>
<title>网页标题</title>
<meta charset="utf-8">
</head>
<body>
网页主体内容
</body>
</html>

3. 标签嵌套在双标签中书写其他标签,称为标签嵌套
嵌套结构中,外层元素称为父元素,内层元素称为子元素;
多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素
平级结构互为兄弟元素
4. HTML语法规范
标签名不区分大小写,建议使用小写
注释语法

<!-- 此处为注释 -->

常用标签介绍

1.基本结构解析

2.HTML 网页结构

3. body中常用标签

标题标签:自带加粗效果,从h1到h6字体大小逐级递减

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

段落标签:

<p>段落文本</p>

普通文本标签:

<span>行分区标签,用于对特殊文本特殊处理</span>
<b>加粗标签</b>
<strong>强调标签,效果同b标签</strong>
<label>普通文本标签,常与表单控件结合实现文本与控件的绑定</label>
<i>斜体标签</i>
<u>删除线标签</u>

容器标签常用于页面结构划分,结合CSS实现网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

格式标签:
浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标
签。

<br>

水平线标签,在页面中插入一条水平分割线

<hr>

字符实体:
某些情况下,浏览器会将一些特殊字符按照HTML的方式解析,影响显示结果。此时需要将这类字符转
换为其他的形式书写
例:

使用 &lt; 在页面中呈现 "<"
使用 &gt; 在页面中呈现 ">"
使用 &nbsp; 在页面中呈现一个空格
使用 &copy; 在页面中呈现版权符号"©"
使用 &yen; 在页面中呈现人民币符号"¥"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--meta 标签中添加name和content标签属性，设置网页附加信息，name属性固定取值，content直接取值--><meta name="Generator" content="pycharm"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title>
</head>
<!--通过HTML标签属性调整样式，不具有通用性-->
<body bgcolor="pink"><!--锚点链接：链接至当前页面的指定位置--><a href="#5">5.人物经历</a><!--标题;h1-h6,自带加粗效果，字号逐级减小--><h1 align="center">一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--允许自定义标签，自定义属性--><h7 aa="bb">自定义</h7><!--段落--><p>段落文本</p><!--普通文本--><span>span</span><label>label</label><b>bold加粗</b><!--br--'break'换行--><br><!--hr  水平分割线--><hr><strong>strong加粗</strong><i>italic斜体</i><u>underline下划线</u><p>已选择<span>10</span>件商品</p><!--字符实体&lt; "<"&gt;  ">"&copy; 版权符号“©”&yen；  人民币符号“¥”&nbsp;  空格--><h1>版权所有&copy;价格&yen</h1><hr><br><h1 align="center">HTML5&lt;Day01&gt;</h1><h2>1 HTML 文档片段</h2><h3>1.1 问题</h3><p>创建图-1所示的HTML页面</p><h3>1.2 方案</h3><p>使用HTML完成</p><hr><br><!--容器标签    常用于页面区域划分--><div>导航栏</div><div>页面主体</div><div>页面底部</div><!--定义锚点 name属性设置锚点名称，自定义锚点链接中，地址使用#（锚点的标准），跟上锚点名称<a href="#5">5.人物名称</a>--><a name="5"></a></body>
</html>

图片与超链接标签
图片标签
:用于在网页中插入一张图片。
1. 属性 src 用于给出图片的URL,必填。
2. 属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
3. 属性 title 用于设置图片标题,鼠标悬停在图片上时显示
4. 属性 alt 用于设置图片加载失败后的提示文本
语法:

<img src="" width="" height="" title="" alt="">

超链接标签:用户可以点击超链接实现跳转至其他页面
1. 属性 href 用于设置目标文件的URL,必填。
2. 属性 target用于设置目标文件的打开方式,默认在当前窗口打开。可以设置新建窗口打开目标文本
(取"_blank")

<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

<body><!--图片标签 ;使用src属性设置图片路径，默认按照原始尺寸显示在网页中，可以手动调整图片尺寸--><!--标签属性书写在开始标签中，用于补充说明当前的标签内容或者修饰原始的样式，为元素添加额外的标识。标签属性由属性名和属性值组成，多个标签属性之间使用空格隔开--><img src="happy.gif"><br><!--设置宽高，缺省方向会等比例缩放--><img src="timg.jpeg" width="1550px" height="700px"title="琴女36D" alt="这是琴女"><!--title属性用于设置鼠标悬停在图片上时显示的文本--><!--alt属性用于设置图片加载失败时的提示文本--><br><img src="aaa.jpg" alt="">
</body>

<body><!--用户可以点击超链接，跳转至其他的资源文件--><!--href属性必填，用于指定链接地址  网络路径必须写协议target属性选填，用于设置目标文件的打开方式，默认在当前窗口打开(_self)，可以设置新建窗口打开(_blank)--><a href="http://www.baidu.com" target="_blank">百度</a><a href="04_img.html">图片文件</a><!--图片超链接--><a href="04_img.html"><img src="happy.gif" ></a><!--href的特殊取值--><!--href为空，表示刷新--><a href="">href=""</a><!--#表示锚点，链接至本业，不会刷新，但是会修改URL--><a href="#">href="#"</a><!--javascript:void(0)阻止超链接默认的点击跳转功能，允许我们自定义点击事件--><a href="javascript:void(0)">javascript:void(0)</a></body>

常用结构标签

列表标签
无序列表(ordered list)
默认使用阿拉伯数字标识每条数据

有序列表(unordered list)
默认使用实心圆点标识列表项

列表嵌套
在已有列表中嵌套添加另一个列表,常见于下拉菜单

<body><!--1.有序列表(ordered list)，默认以阿拉伯数字标识列表项--><!--type属性用于设置列表的项目符号，有序列表默认使用数字，可以修改为‘a','A','i','I'--><ol type="a"><li>list item1</li><li>list item2</li></ol><!--2.无序列表（unordered list),默认以实心圆点标识列表项--><!--type 可取circle(空心圆),square(实心方块),none(取消项目符号)--><ul type="none"><li>列表项1</li><li>列表项2</li></ul><!--网页下拉菜单使用列表嵌套实现，只能使用父子关系嵌套--><ul><li>红楼梦<ol><li>林黛玉</li><li>贾宝玉</li><li>林黛玉</li><li>林黛玉</li></ol></li><li>水浒传<ol><li>林冲</li><li>鲁智深</li><li>吴用</li><li>小旋风</li></ol></li><li>三国演义<ol><li>关羽</li><li>赵云</li><li>曹操</li><li>吕布</li></ol></li><li>西游记<ol><li>孙悟空</li><li>唐僧</li><li>八戒</li><li>沙和尚</li></ol></li></ul></body>

表格标签
表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下

单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后仍然保证表格结构完整

行分组标签:可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所
有行都会被自动加入表格主体中

表单标签表单用于采集用户的信息并提交给服务器,由表单元素和表单控件组成。表单元素form负责提交数
据给服务器,表单控件负责收集数据。

<body><!--表格由结构化的行和单元格组成，用于数据的展示或辅助排版--><table border="1px" width="500px"height="500px"><!--table row 创建行--><tr><!--th表示单元格，自带加粗和居中效果--><th>姓名</th><th>年龄</th><th>班级</th></tr><tr><td>谁谁谁</td><td>30</td><td>001</td></tr><tr><td>张三</td><td>28</td><td>002</td></tr></table><!--单元格合并，为单元格添加属性colspan:跨列合并rowspan:跨行合并取无单位的数值，表示包含自身在内合并几个单元格发生单元格合并，要删除被合并的单元格，以保证结构完整--><table border="1px" width="300px" height="300px"><tr><td colspan="2">示例</td><!--删除被合并的单元格，保证表格结果完整--><td>示例</td></tr><tr><td>示例</td><td rowspan="2">示例</td><td>示例</td></tr><tr><td>示例</td><!--<td>示例</td>--><!--删除被合并的单元格--><td>示例</td></tr></table><!--表格行分组：可以将表格中的若干行分为一组，表示表头，表尾和表格主体默认情况下，所有的行都会自动添加到tbody（表格主体）中显示--><table border="1px" width="300" height="300px"><!--thead 划分表头，是表格内部的划分--><thead><tr><th>姓名</th><th>年龄</th></tr></thead><!--tfoot 表尾--><tfoot><tr><td colspan="2">合计：</td></tr></tfoot><!--tbody--><tbody><tr><td>LQ</td><td>30</td></tr><tr><td>LQ</td><td>30</td></tr></tbody></table>
</body>

HTML基础入门第一篇相关推荐

ps基础教程新手入门第一篇：ps界面的介绍
欢迎来到慕恬瑶平面设计,今天给大家介绍PS基础教程新手入门第一篇: ps界面的介绍.目的让第一次接触ps的小伙伴通过ps基础教程新手入门来了解ps界面的菜单栏,工具栏已方便日后使用. 首先,打开PS ...
ElasticSearch入门第一篇：Windows下安装ElasticSearch
这是ElasticSearch 2.4 版本系列的第一篇: ElasticSearch入门第一篇:Windows下安装ElasticSearch ElasticSearch入门第二篇:集群配置 E ...
Redis入门第一篇【介绍、安装】
tags: Redis title: Redis入门第一篇[介绍.安装] 为什么要用Redis 我对Redis的简单理解:Redis相信学JavaEE的同学都听过这个名词,它是一个缓存数据库. Red ...
高速计算机的应用领域概括,[其它课程]计算机基础教案第一篇第一、二章.doc
[其它课程]计算机基础教案第一篇第一.二章盐城技师学校教案首页授课日期班级课题: 第一章计算机基础知识 §1.1计算机概述教学目的.要求:1.熟练掌握计算机的概念及特征: 2.掌握计算机的发 ...
macino404 || cinema 4D 基础解释 || 第一篇
此篇为cinema 4D 基础解释 //第一篇博客. cinema 4D cinema 4D 基础界面首先在我们初次下载cinema 4D 的时候我们会得到这样一个界面,下面就来了解一下界面中带给我 ...
SDN入门第一篇——Ubuntu16.04安装mininet-wifi
SDN入门第一篇--Ubuntu16.04安装mininet-wifi 最近因为项目需要,需要使用mininet搭建SDN仿真平台,mininet-wifi除了包含基本的mininet功能之外还包括引 ...
Java入门基础教程第一篇
Java入门基础 Java是是一门面向对象编程语言,现在广泛使用,名声和c/c++.python一样,虽然我最常用的语言是python,但现在现在闲来无事,就写了这篇文章. 目录 Java入门基础下 ...
kaggle新手入门第一篇——Titanic
Titanic作为Kaggle官方网站的第一篇入门比赛,如果你想学习kaggle,那么从它开始无疑是比较好的一个选择. 首先贴一下网址:https://www.kaggle.com/c/titanic ...
[php入门] 4、HTML基础入门一篇概览
[php入门] 1.从安装开发环境环境到(庄B)做个炫酷的登陆应用 [php入门] 2.基础核心语法大纲 [php入门] 3.WAMP中的集成MySQL相关基础操作 1.HTML的作用 HTML是超文 ...

HTML基础入门第一篇