Html介绍
Html(hyper text markup language)超文本标记语言
Html是一种标准-----w3c
超文本:在文本内容的基础上,添加更加的丰富的信息(图片,动画,声音等)
标记(标签)---<语义化单词>
标记通常有两次含义:
表型:每一个标签都有一定表现形式
表意:每一个标签有一定的意义
语言:可以直接被浏览器解析,和程序语言不一样
Html的标签分类
l 双标签:开始标签和结束标签构成,内容放入开始标签和结束标签之间
语法:<标签属性名=”属性值”>……内容…..</标签>
属性理解人的特征性别=”女”体重=”45”身高=”165”
例如<div></div><a></a><html></html>
l 单标签:只有开始标签,没有结束标签,没有内容,在单标签的后面一定要闭合
语法:<标签属性名=”属性值”属性名=”属性值” />
例如<link /><img /><br /><meta />
Html基本骨架结构
<html>
<head>
<title>网站的标题</title>
</head>
<body>
主体……
</body>
</html>
html文件的扩展名是 XXX.html-----保存XXX.html
html结构说明:
l <html>含义:告诉浏览器,网页的代码用什么格式来解析
l <head>含义:告诉浏览器网页的汉字用什么字符集,使用的字符集不正确,就会出现乱码 gb2312 简体中文----(汉字操作系统默认使用的)gbk国标码utf-8多国语言
l <title>含义:便于搜索引擎 (给页面起个名称)
l <body>含义:网站的内容,99%的内容都放入body标签中,只有放入该标签,才能在窗口显示(网页内容放入body中)
注意:tab键可以缩进
Html的书写规范
l Html不区分大小写,但是w3c使用的是小写<body>不推荐<BODY>
l Html如果有标签嵌套,顺序嵌套,不能交叉
l 单标签一定要闭合(/)例如<br />
l 属性:每一个标签有没有属性,有多少---w3c规定好的
l 属性值:双引号引起
Html注释
注释的内容不在窗口中显示
单行注释:ctrl+'/'
多行注释:ctrl+shift+'/'
Html文本标签
1. Font 设置文本的颜色文本的字体文本的大小
<font>设置的内容</font>
属性
Color 设置文本的颜色例如color=”red” color=”#ff0000”
Size 设置文本的大小例如 size=”5”是以号为单位
Face 设置文本的字体例如 face=”隶书”
需求:输入一段文本设置该段的前五个字,文本颜色为蓝色blue #0000ff,文本的大小为6号,字体为楷体
<hr/>水平线标签
<br/>换行标签
<del></del>中划线的标签
<b></b>加粗
<strong></strong>加粗加强语气
<i></i>倾斜
<em></em>倾斜加强语气
<u></u>下划线
<ins></ins>文本下划线
<sup></sup>上标
<sub></sub>下标
需求:输入一段文本,要求前六个字文本颜色为蓝色,加粗,倾斜,加下划线
注意:一定要顺序嵌套,不能交叉
Html段落和标题的标签
<p></p>一段
<h1></h1>标题1
<h2></h2>标题2
....
<h6></h6>标题6
h1----h6字体逐渐变小
标题的属性
Align 取值 left center right
<pre>:预定义标签,保留原有的空格和换行
Div :是网站上使用的标签最多之一,本身没有任何意义,自己独自一行,结合css样式一起使用,构成相应的效果块标签
Span 本身没有任何的含义,但是也是网站使用最多标签之一,结合css一起使用构成功能,行内标签
块标签:输入完标签之后,自己独占一行
那些属于块标签<h1></h1>…<h6></h6><p></p><div></div>
行内标签:输入完标签之后,不是自己独占一行
那些属于行内标签<em><span><i><u>
注意:下面的写法不推荐使用,通常块标签里面包括行内标签
列表
就是若干个相似的内容进行排列
无序列表
就是若干个相似的内容进行排列,没有先后顺序
ul的属性:
type 类型 设置列表前面符号的样式 取值 circle(空圈) disc默认 square(实方)
语法:
<ul>
<li>搜狗</li>
<li>输入法</li>
<li>浏览器</li>
</ul>
有序列表
若干个相似的内容进行排列有先后顺序
ol的属性:
type 类型 设置列表前面符号的样式 取值 数字 大小写字母
reversed="reversed"倒叙
start="4"从固定的数值开始排
语法:
<ol>
<li>谁在鼓吹2017年房价下跌?</li>
<li>赵海均:明星并购价值有几何</li>
<li>股市暴跌,到底发生了什么?</li>
</ol>
自定义列表
<dl>
<dt>自定义列表标题</dt>
<dd>对该标题进行描述</dd>
</dl>
Meta标签
描述网页文档属性
http-equiv 和name
http-equiv :模拟的是http文件头信息,当内容从服务器端发送客户端,告诉浏览器如何正确显示信息
字符集
<meta http-equiv=”content-type”content=”text/html;charset=UTF-8” />多国语言
<meta http-equiv=”content-type” content=”text/html;charset=gbk” />国标码
<meta http-equiv=”content-type” content=”text/html;charset=gb2312” />简体中文
网页自动刷新
<meta http-equiv=”refresh” content=”4” /> 间隔4秒网页自动刷新
<meta http-equiv=”refresh” content=”8;http://www.baidu.com” /> 等待8秒自动跳转到百度页面
Name可以设置网页关键字,描述信息等
<meta name=”keywords” content=”关键字” />
便于搜索引擎的需要
特殊转义字符(常用)
 ;一个空格,代表一个字符,一个汉字占三个字符
&ensp;半方大的空白
&emsp;全方大的空白
×;乘号、错误
©;版权@
<; <
>; >
¥; ¥
«左双箭头<<
»右双箭头>>
若有不足请多多指教!希望给您带来帮助!
共同学习,写下你的评论
评论加载中...
作者其他优质文章