html 资料学习

最新推荐文章于 2024-05-23 13:39:19 发布

泡壶热茶__zzzz

最新推荐文章于 2024-05-23 13:39:19 发布

阅读量685

点赞数 2

文章标签： html web w3c

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>

<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>	定义水平线
<!–…–>	定义注释

作用：定义html中的标题：特殊格式的文字。比普通的文字要大一点并且黑一点。

注意：

h标签占据整行。

h6最小，h1最大。

h1-h6可以单独使用。

<!– 一级标题，这个标题标签中最大的哪个字体 –>

这是普通的文字

<p>标签：

作用：在html中定义了一个段落。

p标签的前后是有空行的。

p标签是占据整行的。

br标签：

作用：换行，这是单标签。需要闭合<br /> —-“/>”表示单标签的闭合—-闭合表示结束。

注意：只是单纯的换行，没有其他的任何效果。

hr标签：

作用：定义html中的水平线。

问题遗留：如何显示宽一点的水平线，如何显示其他颜色的水平线。

hr中的属性介绍：

size：定义了水平线的高度—–厚度。

width：定义了水平线的长度

color：表示水平线的颜色。

<!–px表示像素，是一个单位。 –>

<!– %表示占据正好的百分比 –>

<!– color属性表示颜色，red表示红色 –>

<body>

<h2>今天的天气好</h2>

　　青春？这是一个熟悉的字眼，只记得当时和它亲密地接触过。青春，是那么的一个美好的词语。她拥着那些年热情挥洒的浪漫，那些年懵懂不知的笑容。

</p>

<p>

　　什么是青春？正值青春的人儿，不懂得青春是何物，只有在观望了青春的过程，才知道，原来青春是这样的一种启程，不知不觉已经步入青春，而又不知不觉中，青春悄悄的远去。

<br/>青春永远不知道如何的来，又不如何地去。回过头来看时，青春已经白发苍苍，那些的样子，已经记不太清楚了。

</p>

</body>

font标签：定义html中的字体的大小，颜色，以及字体类型（宋体，楷体）

属性：

size：定义字体的大小

color：定义字体的颜色

face：定义字体的类型——-需要用户的电脑支持。如果不支持，就采用默认的字体。

注释标签：

写法 <!– 注释内容 –>

注意：注释的内容，不显示在浏览器中。：给程序员看的，方便程序员的阅读。

[html] view plain copy

print ?

<!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标签的几个属性

border	1 “”	定义表格单元是否拥有边框。默认值“0”表示没有表框
cellpadding	pixels	规定单元边沿(边框)与其内容之间的空白。
cellspacing	pixels	规定单元格单元格之间的空白。
width	pixels %	规定表格的宽度。

<tableborder=“1px”cellspacing=“0px”width=“100%”cellpadding=“10px”>

<tr>

</tr>

<tr>

</tr>

</table>

表格介绍2：单元格的合并

1、横向合并：跨列

2、纵向合并：跨行

在td标签上有连个属性—–属性值：数字，表示跨行或者跨列的个数。

colspan：跨列

rowspan：跨行

<tableborder=“1px”cellspacing=“0px”width=“100%”cellpadding=“10px”>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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—可以更改列表中的序号

[html] view plain copy

print ?

<!– 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的标题，显示在浏览器的顶部–>

<!– 定义本页面的关键字，给搜索引擎使用的，content，就是各个关键字 –>

<!– 给搜索引擎使用的，本页面的描述信息， content是描述信息的内容。–>

<!– 给浏览器用的，告诉浏览器用什么的编码集去解析本页面。 –>

3.2.div标签和span标签

布局标签—-使用div去进行页面的布局。 div+css

div，span本身都没有任何的效果。

div标签会占据整行。

span标签在行内。

33. 字符实体；

在html中输入实体名称，在网页中显示实体效果。

。。。

泡壶热茶__zzzz

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
html 资料学习

1. html简介 1.1. html是什么w3c组织：万维网联盟。w3c制定了一些列的web相关规范。其中包括html。官网：http://www.w3school.com.cn/ HTML 是用来描述网页的一种语言。——写网页的语言。 HTML 指的是超文本标记语言: Hyper Text Markup Language 文本：用于记载和储存文字信息，而不是图像、声音
复制链接

扫一扫