1. html简介
1.1. html是什么
w3c组织:万维网联盟。w3c制定了一些列的web相关规范。其中包括html。
官网:http://www.w3school.com.cn/
HTML 是用来描述网页的一种语言。——写网页的语言。
HTML 指的是超文本标记语言: Hyper Text Markup Language
文本:用于记载和储存文字信息,而不是图像、声音和格式化数据
超文本:在html中,通过标记来标记文本,那么此时文本所表述的信息,就不仅仅是文本。
图片,音频,视频,超链接。
标记:标签。<标签名> ——标签名是w3c组织定义好的,不可以随意添加。
HTML 不是一种编程语言,而是一种标记语言
—没有语法,只有规范。html的组成—-就是有各种各样的标签组成的。
标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
html的组成:
<html> ——理解成html的开始 ;定义一个html文档。
<head> —–定义html中头部的信息,不作为浏览器显示的内容。
例如:页面的描述,标题等等
</head>
<body>
定义了html 的主体。显示在浏览器的内容。
</body>
</html> ——理解成html的结束
1.2. 第一个html例子
1、html本身—-文本文件。新建文本文件。
2、更改文本文件的后缀名,html,htm,xhtml =======建议大家:使用html作为扩展名。
3、用文本编辑器编辑这个文件。
4、在浏览器中查询效果。
<html>
<head></head>
<body>
helloworld!!!
<!–这是注释
img表示定义一个图片
–>
<imgsrc=”7.jpg”>
</body>
</html>
1.3. 例子解释:
<html> ———-定义一个html文档
<head></head>——定义一个头信息
<body>——–定义浏览器要显示的内容:html主体
helloworld!!!
<!–这是注释
img表示定义一个图片
–>
<img alt=”” src=”http://img.1985t.com/uploads/attaches/2014/10/24654-wOk5kD.jpg”>定义一个图片
</body>
</html>
1.4. html中的基本标签
<html> | 定义HTML文档 |
<body> | 定义文档的主体 |
<h1> - <h6> | 定义HTML标题 |
<p> | 定义一个段落 |
<br> | 定义换行 |
<hr> | 定义水平线 |
<!–…–> | 定义注释 |
<h1> 到 <h6>
作用:定义html中的标题:特殊格式的文字。比普通的文字要大一点并且黑一点。
注意:
h标签占据整行。
h6最小,h1最大。
h1-h6可以单独使用。
<!– 一级标题,这个标题标签中最大的哪个字体 –>
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
这是普通的文字
<p>标签:
作用:在html中定义了一个段落。
p标签的前后是有空行的。
p标签是占据整行的。
br标签:
作用:换行,这是单标签。需要闭合<br /> —-“/>”表示单标签的闭合—-闭合表示结束。
注意:只是单纯的换行,没有其他的任何效果。
hr标签:
作用:定义html中的水平线。
问题遗留:如何显示宽一点的水平线,如何显示其他颜色的水平线。
hr中的属性介绍:
size:定义了水平线的高度—–厚度。
width:定义了水平线的长度
color:表示水平线的颜色。
<!–px表示像素,是一个单位。 –>
<!– %表示占据正好的百分比 –>
<!– color属性表示颜色,red表示红色 –>
<hr size = “26px” color = “red” width = “20%” align = “left”/>
<body>
<h2>今天的天气好</h2>
<hr/><!–定义一个水平线 –>
<p><!–表示一个段落 –>
青春?这是一个熟悉的字眼,只记得当时和它亲密地接触过。青春,是那么的一个美好的词语。她拥着那些年热情挥洒的浪漫,那些年懵懂不知的笑容。
</p>
<p>
什么是青春?正值青春的人儿,不懂得青春是何物,只有在观望了青春的过程,才知道,原来青春是这样的一种启程,不知不觉已经步入青春,而又不知不觉中,青春悄悄的远去。
<br/>青春永远不知道如何的来,又不如何地去。回过头来看时,青春已经白发苍苍,那些的样子,已经记不太清楚了。
</p>
</body>
font标签:定义html中的字体的大小,颜色,以及字体类型(宋体,楷体)
属性:
size:定义字体的大小
color:定义字体的颜色
face:定义字体的类型——-需要用户的电脑支持。如果不支持,就采用默认的字体。
注释标签:
写法 <!– 注释内容 –>
注意:注释的内容,不显示在浏览器中。:给程序员看的,方便程序员的阅读。
- <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>
- <html>
- <head>
- <title>MyHtml.html</title>
- <meta http-equiv=“keywords” content=“keyword1,keyword2,keyword3”>
- <meta http-equiv=“description” content=“this is my page”>
- <meta http-equiv=“content-type” content=“text/html; charset=UTF-8”>
- <!–<link rel=”stylesheet” type=”text/css” href=”./styles.css”>–>
- </head>
- <body>
- <p>“电商”就意味着低价,做电商就意味着要降价?这是电商多年来给世人造成的固有印象。
- 由于价格因素在线上销售占据的主导地位,起初,很多实体领域的一线家居品牌在网上并不吃香。
- 因此,很多品牌在开辟线上渠道的前期都推出多款网络专供品,以 低价位、中低品质的产品来提升销量。
- </p>
- <hr size = “36px” color = “red” width = “20%” align = “left”/>
- <p> <font size = “26px” color = “red” face = “楷体”>“瘦田无人耕,耕开有人争”。</font>2010年以来,一方面是无数家居品牌在纠结中纷纷开辟电商渠道,一方面是品牌电商同质化竞争日趋明显。
- <br/>
- 年轻群体网上购买家具建材的消费习惯不断蔓延,而网购家具描述不符、色差大、到货慢、退换货成本高等问题也逐一暴露。
- </p>
- <img width = “80px” height = “100px” alt=“” src=“http://img.1985t.com/uploads/attaches/2014/10/24654-wOk5kD.jpg”>
- <br>
- </body>
- </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<p>“电商”就意味着低价,做电商就意味着要降价?这是电商多年来给世人造成的固有印象。
由于价格因素在线上销售占据的主导地位,起初,很多实体领域的一线家居品牌在网上并不吃香。
因此,很多品牌在开辟线上渠道的前期都推出多款网络专供品,以 低价位、中低品质的产品来提升销量。
</p>
<hr size = "36px" color = "red" width = "20%" align = "left"/>
<p> <font size = "26px" color = "red" face = "楷体">“瘦田无人耕,耕开有人争”。</font>2010年以来,一方面是无数家居品牌在纠结中纷纷开辟电商渠道,一方面是品牌电商同质化竞争日趋明显。
<br/>
年轻群体网上购买家具建材的消费习惯不断蔓延,而网购家具描述不符、色差大、到货慢、退换货成本高等问题也逐一暴露。
</p>
<img width = "80px" height = "100px" alt="" src="http://img.1985t.com/uploads/attaches/2014/10/24654-wOk5kD.jpg">
<br>
</body>
</html>
1.5. 属性:
属性是标签的一部分。
写法<标签名 属性=”属性值”> 如果双标签,属性书写在开始标签上。
属性有什么?w3c组织定义好的。
作用:是对标签功能的扩展。
适用于大多数 HTML 元素的属性:
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入)—-引入css的,下午内容讲解 |
id | 定义元素的唯一id:标签的唯一标识。方便定位到具体的标签 |
style | 规定元素的行内样式(inline style) title text 规定元素的额外信息(可在工具提示中显示)——css的内容。 |
2. html常用标签介绍
2.1. img标签
作用:定义一个图片
属性:
src:图片的资源路基
width:图片的宽度
如果值是百分比,是相当于父标签大小的百分比。
height:定义图片的高度
alt:对图片的描述。当图片加载失败的时候,显示给用户。告诉用户这是什么图片。友好方式的体现。
<!– 图片的来源?电脑中,互联网上的资源,
属性src:引入图片的资源目录—-图片的位置
如果是绝对路径:file://xx..xx..x
写法2:http://ip地址/图片资源目录
属性width:宽度—-定义图片的宽度
height:高度—-定义图片的高度
–>
<imgsrc=“img/7.jpg”width=“300px”height=“300px”>
2.2. a标签—-超链接
a标签也叫做超链接:
作用:
1、实现页面的跳转。
2、页面内部的跳转。
写法:
<a>文字信息或者其他标签</a>
属性:
href:要跳转的页面的一个路径。
href=“http://www.jd.com”
href:
1、可以写http:协议—互联网上某一个资源
2、也可以书写文件协议。(并不是说相对路径就是文件协议。相对的路径的协议是根据a标签所在页面的协议而定的。)
3、mailto:邮件协议
4、thunder:迅雷协议
5、与js搭配使用–href=”JavaScript:void(0)
6、跳转本页面某个部分:
6.1需要在顶部定义一个a标签,需要有id,或者name属性
6.2在其他的a标签上,href属性书写定义好的a标签的 #+++ id值或者name值
2.3. table标签
html中的表格:
由行和列组成的。
作用:格式化数据的输出。
<table> :定义表格
<tr> :定义行
<td> : 单元格
tr写在table内
td书写在tr内
table标签的几个属性
1 | 定义表格单元是否拥有边框。默认值“0”表示没有表框 | |
pixels | 规定单元边沿(边框)与其内容之间的空白。 | |
pixels | 规定单元格单元格之间的空白。 | |
pixels | 规定表格的宽度。 |
<tableborder=“1px”cellspacing=“0px”width=“100%”cellpadding=“10px”>
<tr>
<td>订单信息</td>
<td>收货人</td>
<td>订单金额</td>
<td>操作</td>
</tr>
<tr>
<td>订单编号: 249143375</td>
<td>张飞</td>
<td>¥134.00<br/>货到付款</td>
<td><ahref=“****”>查看</a></td>
</tr>
</table>
表格介绍2:单元格的合并
1、横向合并:跨列
2、纵向合并:跨行
在td标签上有连个属性—–属性值:数字,表示跨行或者跨列的个数。
colspan:跨列
rowspan:跨行
<tableborder=“1px”cellspacing=“0px”width=“100%”cellpadding=“10px”>
<tr>
<td align=“center”>订单信息</td>
<td>收货人</td>
<td>订单金额</td>
<td>操作</td>
</tr>
<tr>
<td colspan=“4”>京东</td>
</tr>
<tr>
<td rowspan=“2”>订单编号: 249143375</td>
<td>张飞–耳机</td>
<td>¥134.00<br/>货到付款</td>
<td><ahref=“****”>查看</a></td>
</tr>
<tr>
<td>张飞–U盘</td>
<td>¥24.00<br/>货到付款</td>
<td><ahref=“****”>查看</a></td>
</tr>
</table>
asdf asdf
2.4. 框架标签
frameset标签:把页面分割成若干个部分。
frame标签:引入其他的页面资源。
frameset的属性介绍:
rows属性:把页面分割成若干个行,用“逗号”分开,表示分割成几行
cols 属性:把页面分割成若干的列。用“逗号”分开,表示分割成几行
frame的属性介绍:
src属性:引入其他页面的资源。
缺点:
frameset 不能和body标签一起使用。
iframe标签:
作用:引入其他的页面
src:引入页面的资源目录
width:设置页面的宽度
height:设置页面的高度。
<iframesrc=”02demo.html” width=”“height=”“></iframe>
2.5. 输入标签和表单标签
input标签:提供输入框,允许用户在html中输入数据。
type属性:
type的值 | 代表的输入类型 |
text | 普通文本输入(默认) |
password | 定义了密码域 |
radio | 单选按钮 |
checkbox | 复选框 |
hidden | 隐藏域 |
file | 文件上传 |
button | 定义一个按钮(通常会与js搭配使用,实现一些功能) |
submit | 表单提交按钮 |
reset | 表单恢复初始状态按钮 |
********************************************************
form(表单)标签:
作用:把数据提交给服务器;
1、如何提交数据?
2、提交什么数据?
3、以什么样的方式提交数据到后台?
post和get !!!
form属性:
action:url ——数据提交的位置。
method : get 和 post两种 默认是get
get和post的不同:
get方式提交数据:
把数据全部拼接到url中,作为url的一部分。
http://ip:端口/资源?key=value&key=value
不足:信息不安全,暴漏在地址栏中。
传递的信息长度有限。
post方式提交数据:
把请求的内容:放入到请求体中。外观不可见。
长度没有限制。
注意问题:
1、form要提交的数据,一定是在form表单内的。
2、如果表单要提交数据,需要输入标签有 name属性。
3、表单数据提交的形式:key = value ,key表示标签中name的值。输入的内容作为value。
4、非输入框信息,我们需要为这个标签提供默认值,通过标签的value属性设置默认值。
5、select标签, name定义在select标签上
value 定义在option标签上
2.6. 列表标签
在html中,有三种列表标签
有序列表,无序列表,自定义列表
有序列表:
ol 标签定义了列表。
li标签定义了列表的选项。是ol的子标签。
ol中的属性
type—可以更改列表中的序号
- <!– type更改的是列表中的序号类型 ,1表示数字,a表示小写英文字母,
- A表示大写英文字母,i表示罗马计数, I大写的罗马计数–>
- <ol type=“I”>
- <li>java</li>
- <li>html</li>
- <li>c++</li>
- </ol>
<!-- type更改的是列表中的序号类型 ,1表示数字,a表示小写英文字母,
A表示大写英文字母,i表示罗马计数, I大写的罗马计数-->
<ol type="I">
<li>java</li>
<li>html</li>
<li>c++</li>
</ol>
3.补充部分
3.1. head标签中的内容介绍
<!– html的标题,显示在浏览器的顶部–>
<title>01有序列表.html</title>
<!– 定义本页面的关键字,给搜索引擎使用的,content,就是各个关键字 –>
<meta http-equiv=“keywords” content=“keyword1,keyword2,keyword3”>
<!– 给搜索引擎使用的,本页面的描述信息, content是描述信息的内容。–>
<meta http-equiv=“description” content=“this is my page”>
<!– 给浏览器用的,告诉浏览器用什么的编码集去解析本页面。 –>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>
3.2.div标签和span标签
布局标签—-使用div去进行页面的布局。 div+css
div,span本身都没有任何的效果。
div标签会占据整行。
span标签在行内。
33. 字符实体;
在html中输入实体名称,在网页中显示实体效果。
。。。