HTMl(超文本标记语言)简介
含义
文本标记语言:用标记将文本标识出来的语言。
超:比文本标记语言多了一些东西,能够标记出图片
超文本标记语言(HypertextMark-uplanguage),他通过标记符号来标记显示的网页中的各个部分,HTML是一种规范,是一种标准。
HTML的发展史
w3c(万维网联盟)
HTML5在2014年10月29日,制定结束。
注意:
某某某浏览器支持了HTML5=>
严格来说应该说:某某某浏览器支持了HTML5的什么功能。
HTML语言的语法
创建HTML文件
创建html文件后缀名必须为html,前面文件名随意,但是不要用中文。
标签属性
双标签
<标签名></标签名>叫双标签。
<marquee></marquee>叫标签。
标签是HTML最基本的单位,也是最重要的组成部分。
标签需要使用两个尖括号包起来,包含指定的字母。
标签有两个标记一个代表开始,一个代表结束。结束使用/加标签名。
标签名都是相同的,成对出现的。
小技巧:
写双标签时应该将开始标签和结束标签全部写完了后再写标记的内容。
单标签
<标签名/>叫单标签,不是成对出现的,结尾以/来结尾。
<br/>换行。
注意:
1、HTML标签不区分大小写,但是我们推荐使用小写,这样更符合标准。
2、属性:
用来修饰、控制标签的,如果你不写某个属性,这个属性也会有一个默认值。
loop这个属性默认值是0,代表一直循环。
loop='3'属性。
格式:
属性名="属性值"
注意:
1、属性要写在标签里面。
2、写属性值的时候,可以使用单引号也可以使用双引号,也可以不写。但是建议使用双引号。
3、标签的属性可以有多个。
4、标签属性不分先后。
HTML颜色值得设置
颜色值两种表示方法
1、直接用英文单词来表示颜色(pink、red、blue、green、yellow、black)
2、用6位的16进制的值来表示(0~9a~f)
6位分成三组,红、绿、蓝的比例。
每一组的2位里面就是指的这种颜色。在使用的时候前面加上#号。
HTML对于空格及回车的处理
1)、HTML中一个空格和多个空格都会当作一个空格来处理。
2)、HTML中一个回车也会当作一个空格。
HTML字符实体
有些字符是系统预留的或者打印不出来的字符,这个时候如果你想要显示他们需要使用到实体。
实体的概念
实体:就是一些特殊的数字、字符来表示一些特殊的字符的字符串。
常用的实体
空格
<
>
&
"
'
两种表示实体的方法
1)、字符串表示
空格
<<
>>
&&
""
''
格式:&字母;
2)、数字表示
空格
<<
>>
&&
""
''
格式:&#数字;
标签的嵌套
双标签里面可以嵌套双标签也可以嵌套单标签。
HTML标签格式:
1、双标签的格式
<标签名属性1="值1"属性2="值2".....>要标记的内容</标签名>
2、单标签的格式
<标签名属性1="值1"属性2="值2"....../>
HTML的注释符
<!--要注释的内容-->
注释符的使用:
1、说明代码的时候。
2、调试代码的时候。
HTML的主体标签
告诉浏览器应该以什么方式来解释这个文档
<!DOCTYPE html>
注意:
1、必须放在第一行。
2、不区分大小写<!doctype html>或者<!DOCTYPE HTML>都可以
HTML的外层标签:
HTML文档的最外层要有一组<html>标签成对出现,在整个文档中是唯一的。是网页文件的最外层标签。
注意:
1、HTML文档中的所有的标签都应该在<html></html>中
2、<html>告诉浏览器这是HTML文件的起始点。
3、</html>告诉浏览器这是HTML文件的结束。
在<html>标签中要有<head>和<body>标签:
<head>标签:
头标签,这里的内容不会显示在浏览器中,这里面通常放置网页的描述性语句。说明网页的公共属性。
<body>标签:
主体标签,这里面放置的是真正的内容、文字、图片。
HTML的缩进
按Tab键=》每次缩进4个空格
HTML的标签
<head>描述和关键字
描述:keywords 关键字:description
示例:
<meta name="keywords" content="忘记时间" />
<meta name="description" content="忘记,时间" />
<head>标签
<head></head>
<title>标签:
定义在整个HTML文档中的标题,显示在网页的标题栏上,在整个HTML文档中只能有一个。
作用:
1、显示网页的标题,让用户一看就知道网页要表达的意思。
2、搜索引擎在搜索的时候将title作为关键字。
字符集
字符集:
字符的集合。
编码:
规定字符集里面的每个字应该怎么写。
发展过程:
1、美帝国主义发明了电脑。他们需要和电脑进行沟通,这个时候发明了一种编码,单字节编码ACSCII码。只包含了英文字母和一些符号。一个字占用一个字符。
2、随着电脑的普及,每个国家人都需要和电脑进行沟通。这个时候各个国家开始制定自己的字符集(ANSI编码),ANSI是各国指定的,中国制定了GBK、GB2312。一个汉字占用2个字符。
3、ANSI中只能存储自己国家的字符,如果要在一个文档中存储多个国家的字符。国际标准化组织制定了个规范,推出了UNICODE编码。UTF-8的字符集、UTF-16,
<meta/>标签
定义对页面的描述:
更改字符集
规定让浏览器以什么字符集来解析这个页面。
<metacharset="utf-8"/>
其他用法
<metaname=""content=""/>
name属性里面的值都是规定好的:
1、keywords,指定网页的关键字
2、description,指定网页的描述
content属性中的值,根据name属性的值来字定义的内容。
1、name值为keywords时
作用:
1、当搜索引擎在抓取网页的时会将这些关键字抓取出来。
注意:
1、可以设置多个关键字、每个关键字之间使用逗号进行分隔。
2、计算机中使用的符号都是英文符号。
2、name值为description时
注意:
1、里面就是放置的本网页的描述信息。
其他的头标签
<script></script>
用来定义一段javaScript脚本
<style></style>
用来写CSS样式
<link/>
设置外部文件的链接,用于确定本页面和其他文档之间的关系。
<body>内的标签
<body>标签中的内容都是显示在浏览器中的。
文本标签:
网页中信息通常以文字为主,一个使用的好的文本标签的网页可以很好的突出内容。
1.<p>标签:
定义一个段落。
注意:p标签会在每个段落前后自动创建一行空白。
2.<hn>标签:
文字的标题
<h1>~<h6>
<h1>最大的标题
<h6>最小的标题
注意:
1、被<hn>标记的文本将会自动换行并加粗。
2、H标签是标题标签,他的重要程度从<h1>-><h6>依次递减。
3、内容的总体标题,通常使用<h1>标签,而且这个标签离body越近越好。
3.<b>标签:
加粗文本
4.<strong>标签:
表示重要的文本内容,也就是在需要文本突出周围文本的时候使用。
注意:
<b>和<strong>样式虽然一样,但是对于浏览器和搜索引擎来说他们的意义是不同的,<b>表示加粗,
<strong>表示文本很重要。
5.<i>标签:
斜体
6.<em>标签:
斜体,并强调标记的内容要重读。
注意:
<i>只用来表示斜体,通常用在技术术语,一些外文单词,
<em>标签表示这个单词要重读。
7.<cite>标签:
用来定义作品的标题。
8.<q>标签:
用来表示一个简短的引用。
cite属性:
表示从哪里引用的。
注意:不要看他的样式,注意他的含义,内容。
9.<abbr>标签:
表示一个缩写
注意:
1、会告诉搜索引擎、用户这个简写代表什么意思。
2、鼠标移动上去的时候会有一个提示框。
10.<del>标签:
表示该文本已经被删除。中间有一条中横线表示删除。
cite属性:
表示为什么删除。
11.<dialog>标签:
表示对话,将对话的内容包含在里面。(需要配合dt和dd标签)
注意:
1、dialog包括起来以后,说话的人用<dt>包括起来,说的话用<dd>包括起来。
链接标签
链接:
在web项目中,网页是相互连接的。这种点击可以跳转的东西叫作链接。
绝对路径、相对路径
绝对路径:
从头开始计算文件的路径。
举例说明:
C:\xampp\htdocs\140\20160229
http://www.baidu.com/index.html
相对路径:
相对于文件现在的位置来进行计算。
注意:
相对路径中表示当前目录使用.
举例说明:
./1.html
相对路径中表示当前目录的上级目录使用..
./../20160226/1.html
../20160226/1.html
http://www.baidu.com/index/index.html
./abc
http://www.baidu.com/index/abc
http://localhost/140/20160229/xxoo.html
http://localhost/140/20160229/ooxx.html
<a>标签:
链接到指定的文档
href属性:
要跳转的页面,为一个URL,可以是绝对路径也可以是相对路径
注意:
1、如果网址为绝对路径时需要加上http://否则找的是当前目录下xx文件。
2、绝对路径不能使用本地的绝对路径
http://www.baidu.com/index/index.html
target属性:
点击链接后在哪里打开。
_blank:新窗口打开
_self:本窗口打开(默认)
锚点(URL中的片段表示符)
步骤:
1、分块
<aname="标记名">
要分块的内容
</a>
2、标记链接(显示出来的能够点击的链接)
<ahref="#标记名">标记链接</a>
注意:
1、标记链接的时候要和分块的名称要一样。
2、不要用中文。
块状元素和行内元素
行内元素:都在一行上面显示。
块状元素:每一个都是一整块(会自动换行)。
列表标签
<ul>无序列表
注意:
1、将所有的项用<ul>包起来。
2、将每一项用<li>包起来。
<ol>有序列表
注意:
1、将所有的项用<ol>包起来。
2、将每一项用<li>包起来。
图像标签
<img/>标签:
图像标签
src属性:
值必须为一个URL,可以是本地文件也可以是网络文件。这个地址指向一个图像。
如果图像不存在就裂了
alt属性:
图像不能正确显示的时候告诉浏览器网页的人和搜索引擎这张图片应该表示的是什么内容。
width属性:图像的宽度
height属性:图像的高度
px:像素,pixel缩写。
举例说明:
1024×768屏幕中的像素点为1024*768个
表格
<table>标签:
告诉浏览器在<table>内包含内容属于表格。
<caption>标签:
给表格添加标题。
<thead></thead>:
表格表头
<tbody></tbody>:
表格主体
<tfoot></tfoot>:
表格脚注部分
<tr></tr>与<td></td>:
每一行使用一个<tr></tr>,如果是在<thead>中的单元格使用<th>
如果是在<tbody>或<tfoot>中的单元格使用<td></td>
常用属性:
<table>中的属性:
border属性:
边框
<th><td>中的属性
colspan:规定单元格横跨的列数。
rowspan:规定单元格竖跨的行数。
表单
<form>标签:
告诉浏览器这个双标签中包含的内容是表单的内容。
method属性:
提交数据的方法。默认的时候使用get方法,可以指定为post。
action属性:
将数据提交到哪里,直接写接收的地址。是一个URL地址,可以是绝对路径也可以是相对路径
<input/>标签:
单标签,用来定义输入框
type属性:
定义输入框的类型:
text:表示是一个文本输入框,让用户输入的。
配合的属性:
name:必须写,输入的值传递到服务器上的标识。
value:表示默认值。
size:表示输入框的宽度。
maxlength:最大允许输入的字符。
disabled:disabled="disabled"禁用输入框。
password:表示是一个密码输入框
配合的属性:
name:必须写,输入的值传递到服务器上的标识。
radio:表示定义一个单选框
配合的属性:
name:必须写,标识。
value:指每个选项对应的值。
注意:一组单选框他们的名字应该是相同的否则不能实现单选。
checked:checked="checked"默认选中
checkbox:复选框,可以选择多个。
配合的属性:
name:必须写,标识
value:对应的值。
注意:name的值后面加上个中括号,表示接收到的值是一组值,而不是一个值。
checked:checked="checked"默认选中
file:
上传框
配合的属性:
name:必须写,标识。
hidden:隐藏域,没有显示的结果。
name:必须写,标识
value:对应的值。
submit:提交按钮
value:表示按钮显示的值。
reset:重置按钮,重置input标签的内容
value:表示按钮显示的值。
image:图像按钮,使用图片代替submit原来的样式。
src属性:来指明图像的位置。
autofocus属性:将光标自动定位在拥有该属性的表单中,一个页面中只有一个元素能够使用autofocus。
placeholder属性:占位符,用于给予快速提示。格式:placeholder="值",当该字段获得鼠标焦点时候文字自动消失。
id属性:为了给一个<label>标签指定一个标识。
标签
<label>标签:
为<input/>标签定义标注
for属性:
和input表单中的id属性进行绑定
<select>标签:
定义一个下拉列表
name属性:下拉列表叫什么名字
disabled属性:disabled="disabled"
<option>标签:用来定义下拉列表中的每一项。
value属性:实际选中该选项后传递给服务器的值。
disabled属性:disabled="disabled"禁用掉某个选项
<textarea>标签:
用来输入大段文字。
name属性:传输的标识。
注意:
1、定义默认值时应该将默认值写在标记的中间。
2、如果<textarea>标签中间有回车,输入的内容中也会有回车。
cols:文本区域内可见的宽度
rows:文本区域内可见的高度
resize:none
让文本区域固定不变
<button>标签:
定义一个按钮
type属性:
button,表示没有任何效果。
submit,表示提交
reset,表示重置。
注意:对于type属性每个浏览器中的默认值是不同的。所以我们在使用的时候要注意给type加上一个值。
<iframe>标签:
内框架标签
src属性:载入框架的时候文档的地址。
frameborder属性:规定是否显示边框,1为显示,0为不显示。
width属性:设置iframe的宽度
height属性:设置iframe的高度
scrolling属性:是否允许滚动,在iframe显示滚动条使用yes,不显示滚动条使用no,auto表示的自动的。
name属性:是给这个框架起一个名字。配合a链接的target属性用于在该框架中打开页面。
其他的标签
<br/>换行
<hr/>标签线,定义内容中的主题变化。
<pre>原样输出。
"最没用"的标签,出现了CSS变成了最有用的标签:
<div>:块状元素
<span>:行内元素