html

最新推荐文章于 2023-01-15 21:17:15 发布

zhao_crystal

最新推荐文章于 2023-01-15 21:17:15 发布

阅读量765

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/zhao_crystal/article/details/81003547

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Html代码

Css代码

Javascript代码

Jquery代码

Php代码

Html（hyper textmarkup language）超文本标记语言

Html是一种标准（w3c制定的）

语言：可以直接被浏览器解析，和程序语言不同.

超文本：在文本内容的基础上添加了更加丰富的信息（比如图片，动画，声音等多媒体技术）

标记（标签）：<单词>

挨着<的是标记

(1)标记通常有两层含义：

表型：每一个标签都有一定的表现形式

表意：每一个标签都有一定的意义

(2)html 标签的分类：

1）双标签：开始标签和结束标签构成，内容放入开始标签和结束标签之间

语法： <标签属性名=“属性值”>…内容…..</标签>

Eg:<a></a> <div></div> <html></html>

属性：比如一个人的特征，性别=“女” 体重=“45公斤”身高=“165”

性别，体重，身高就相当于属性名。而后边的就是属性值。

2）只有开始标签，没有结束标签，没有内容, 在单标签的后边一定要闭合(如”/”)

语法：<标签属性名=“属性值”属性名=“属性值”/>

Eg: <link/><img/> <br/> <meta/> 可能实际中看不到”/”

1. Html的基本骨架结构

<html>

<head>

<title>网站的标题</title>

</head>

<body>

</body>

</html>

文件的扩展名***.html

1) Html结构说明

<html>含义：告诉浏览器,网页的代码用什么格式来解析

<head>含义：告诉浏览器网页的汉字用什么字符集,使用的字符集不正确,就会出现乱码。

gb23312 简体中文(汉字操作系统默认使用此种) gbk 国标码 utf-8 多国语言

<title>含义：便于搜索引擎

<body>含义：网站的内容，99%的内容都放入body标签中,只有放入该标签，才能在窗口显示

注意：使用tab键进行缩进

2. Html的书写规范

(1) Html不区分大小写, 但是w3c使用的是小写eg:<body>不推荐<BODY>

(2) Html 如果有标签嵌套,顺序嵌套，不能交叉。

(3) 单标签一定要闭合(/) eg:</>

(4) 属性：每一个标签有没有属性，有多少，w3c规定好的。

(5) 属性值：双引号引起来。

Html注释： 注释的内容不在窗口中显示

3. Html的标签

(1) Html的文本标签

1) Font设置文本的颜色文本的字体文本的大小

<font>设置的内容</font>

属性（属性之间没有先后顺序）

Color设置文本的颜色 eg: color=”red” or color=”#ff0000”

Size设置文本的大小 eg:size=”5”是以号为单位

Face设置文本的字体 eg: face=”隶书”

2) 加粗：

<b></b>

<strong></strong>加强语气

3) 倾斜：

<i></i>

<em></em> 加强语气

4) 加下划线：

<u></u>

<ins></ins> 加强语气

5) 上下标

<sup></sup>上标

<sub></sub>下标

（2）Html段落的标签

1)段落

<p></p>

段落的属性：align: center(居中),left(靠左对齐，默认), right(靠右对齐)

2）标题

<h1></h1> 标题1

<h2></h2> 标题2

……

<h6></h6> 标题6

标题的属性：align: center(居中),left(靠左对齐，默认), right(靠右对齐)

（同段落的属性align的用法）

Span 本身没有任何的含义,但是也是网站使用最多的标签之一, 结合css一起构成功能,行内标签

（3）块标签和行内标签

1）块标签：输入完标签之后，自己独占一行

哪些属于块标签：<h1></h1>……<h6></h6> <div></div>

2）行内标签：输入完标签之后，不是自己独占一行

哪些属于行内标签<font><em><span><i><u>

注意：通常块标签里面包括行内标签

eg：<h3><fontcolor="blue">传智播客</font></h3> good

<font color="blue"><h3>传智播客</h3></font> bad

(4) 列表：

列表就是若干个相似的内容进行排列

1）无序列表

若干个相似内容进行排列，没有先后顺序,内容放在最底层的标签里边。

语法：

<ul>

</ul>

ul的属性：

type类型设置列表前面符号的样式取值：circle 空心圆， disc(默认)实心圆， square 方形。

2）有序列表

若干个相似的内容进行排列有先后顺序

语法：

<ol>

</ol>

1 搜狗

2 输入法

3浏览器

(5) 图片标签(单标签，行内标签)

图片的语法： <img 属性名=“属性值”/>

图片的属性

1) 图片的路径 src=“图片的地址”（图片要放到同一个站点下，即放在同一个文件夹下）

2) 图片的宽度 width=”数值” 以像素为单位的px，（注意“数值”是不带单位的eg with = “300”）

图片的高度height=”数值” 以像素为单位的px，

图片的边框 border=”数值”

3) 图片的解释说明 alt=”对图片的描述内容”（不会在图片中显示出来）

4) 图片和内容左右之间的距离 hspace=”数值”

图片和内容上下之间的距离 vspace=”数值”（了解css样式实现）

注意：想要图片等比例缩放，只设置宽度或高度

(6)表格介绍

语法：

<table>（表格）

<tr>（行）

<td>内容</td>（单元格）

<\tr>

<tr>

<\tr>

</table>

若内容为空,用”&nbsp”填充，这里的内容不仅局限于汉字,还可以是图片等其他信息

1) 表格的属性

表格的边框border=“数值” default is 0

表格的宽度width=“数值”

表格的高度height=“数值” (w3c推荐不建议使用高度)

表格的居中方式align=”水平对齐方式” 数值：left, center, right

表格中的内容和单元格之间的距离 cellpadding=”数值” default is 2px

表格中单元格和单元格之间的距离, cellspacing=”数值” default is 2px

表格的背景颜色 bgcolor=”颜色值” eg:bgcolor=”red”

表格的背景图片background=”图片的地址”（背景图片不能含有中文,修饰的作用）

注意：background 的优先级高于 bgcolor

合并表格的边框线 rules=”all” (w3c不推荐使用，css样式来实现)

表格的边框颜色 bordercolor=“颜色值” (通常不建议使用)

2) <tr>行的属性

height行的高度

bgcolor背景颜色

background背景图片

align水平对齐的方式left center right

valign垂直对齐的方式top middle bottom

3) <td>单元格的属性

bgcolor背景颜色

background背景图片

width单元格的宽度

align内容在单元格中的水平对齐方式

valign内容在单元格中的垂直对齐方式

4) 表格的扩充

合并单元格的问题

横向合并

横向合并即左右合并,将若干个单元格合并成一个单元格。

colspan=”3” 即横向合并3个单元格

纵向合并

经纵向合并后，第一行3个单元格，第2行2个单元格

纵向合并的单元格属于最上层的那一行

rowspan=”2” 即纵向合并两个单元格

(7) 链接

语法：

属性：

1）链接的地址 href="链接的地址(url)”

url :绝对地址分相对地址

绝对地址：即网络地址(注意,一定带有http:)

语法：<a href=”http://www.taobao.com”>淘宝</a>

本地的地址------在你的本机上测试

相对地址：在同一个站点下，在同一个文件夹下

目标文件和当前文件在同一个目录，直接写文件名称

目标文件在当前文件的下一级目录，XX表示文件夹名 XX/文件名称

目标文件夹在当前文件的下两级目录同理。

目标文件在当前文件的上一级目录 ../文件名称

目标文件在当前文件的上两级目录 ../../文件名称

2） Target打开目标文件的窗口

_blank 在新的窗口中打开目标文件

_self (default) 在原来的窗口中打开目标文件

3） name定义锚点的名称

同一个页面的不同区域的直接跳转

定义锚点

<a name=”锚点名称”></a> （在<a></a>不加内容，给链接中的target用）

跳转锚点

4）特殊链接

下载链接

哪些文件可以不用下载，可以直接做链接 .html .jpg .gif

哪些文件必须下载链接，.zip .exe

邮件链接

<ahref=mailto:邮件的地址>内容</a>

空连接

在当前页面做链接<a href=”#”>链接的内容</a>

5）Javarscript 链接

(8)Meta标签

1)补充知识：字符集

计算机只能识别0,1。若要想让其识别其它的字符，字母需要通过编码（编码：即每一个字符可以用不同的二进制来表示）

ASCII码：用1个字节（8位二进制数）来表示所有的字符,共可以表示2**8=256个字符

ANSI码：其他国家，都对ASCII进行扩展,用于显示本国的语言。用2个字节(16位二进制数)来表示，共可以表示2^16=65536

---在中文操作系统：GB2312 共收入了6763个汉字

---在繁体操作系统：gib5

GBK编码：对GB2312进行扩充，收录了一些冷门的汉字、古汉语等…大约有2.1万个汉字。

Unicode编码：计划将世界上所有字符同意编码，用4个字节（32位二进制数）来表示一个字符，他的缺点，编码表文件太大了,不方便使用, 用4个字节表示简单的字符造成空间的极大浪费。

Utf-8：多国语言编码。不同的字符，他会选择合适编码来进行翻译

2）meta标签，描述网页文档的属性：

http-equiv 模拟的是http文件头信息，当内容从服务器端发送到客户端,告诉浏览器如何正确的显示信息。

字符集的选择：

网页自动刷新：

name 可以设置网页关键字，描述信息等：

eg:

4. 颜色代码：(百度：颜色英文表示法，html颜色代码)

英文：red green blue

十六进制：#ff0000 #00ff00 #0000ff

十进制：rgb（255,0,0）rgb（0, 255,0） rgb（0, 0，255）

5.表单的介绍：

可以获取客户端的信息(数据)，表单有各种各样的控件，输入框，复选框按钮等

（1）表单的功能：交互功能

（2）表单的工作原理：

浏览有表单的页面,填写必要的信息，再单击某个提交按钮。
并对表单中的数据进行验证，如果不符合制定的要求（有的只涉及前端的验证，有的还涉及后台），提示验证没有通过，如果符合要求，把数据提交到服务器端，将数据放入数据库。
表单分为前台的制作页面,php对数据进行处理,增，删，改，查数据到数据库中。

（3）表单的结构:

1）表单的语法:

2）表单的属性

1）name 表单的识别名称一个页面有多处表单通过表单的识别名称来辨认你提交的是哪个。若一个页面只有一个表单，表单名可以忽略
eg： <form name="Bill"> </form>
<form name="game"> </form>
2）action=“XX.php” 对数据进行处理
action=""对表单中的数据处理的程序就是在当前的文档。
3）method="get/post" 把表单中的数据提交到服务器端的方法，即传递数据的方法。
get 方法 默认的一种传递数据的方法通过地址来传递表单中的数据
特点：不安全，不能传递敏感的数据，如密码
不能传递大量的数据，每次只能传递1024字节
不能上传附件
post方法，不是通过地址栏传递数据，而是把数据传给文件处理程序
特点：相对安全
可以传递海量的数据
能上传附件

3）控件：

1）单行文本框(单标签，行内标签) （ 注意：input,type,name 是必选项 ）
比如：帐号，密码
语法：
<input type="text" name=“username”/>
属性：

name 单行文本框的内容的识别名称是把输入框中的数据提交到文件的处理程序，可以自定义名称，起的要有意义，

命名规则（开头是字母或下划线，后面可以是字母，数字，下划线）

size="数值" 输入框的宽度，以字符为单位 size=“50” 即该文本框可以最多显示50个字符
maxlength="数值" 最多允许输入的字符数，如果超出范围，输入不进去
value=“内容” 设置输入框的初始值，在输入框中默认的数据信息
eg：
<body>
<form action="XX.php">
username:<input type="text" name="username" size="30"
maxlength="8" value="please input username"/><br/>
telephone:<input type="text" name="telephone" size="30" maxlength="20"><br/>
E-mail account<input type="text" name="email" size="30" maxlength="20"><br/>
<input type="submit" value="submit">
</form>
</body>

2）密码框(与单行文本框不同的是,当在密码框中输入数据时是以"."或"*"的形式展现)
语法：
<input type="password">
密码框的属性：
name 密码框的内容的识别名称
size 输入密码框的宽度，以字符为单位
maxlength="数值" 最多允许输入的字符数，如果超出范围，输入不进去
value=“内容” 设置输入框的初始值，在输入框中默认的数据信息
readonly 只读属性,即只能选中,不能修改

disable 禁止属性，不能选中，不能更改(以firefox为准)

3）单选按钮（如性别，婚否，只能选择其一）

语法：
<input type="radio">
单选按钮的属性：
name 单选按钮组的识别名称 ,即 male Female属于同一个组，name应该相同
value 设置初始值,必须得写,是单选按钮组每一项的值。
eg：
sex male<input type="radio" name="sex" value="male">
female<input type="radio" name="sex" value="female">
4）复选框（多选按钮，同时可以选好几个选项）（如购买类型，用途）
语法：
<input type="checkbox">
复选框的属性：
name：多选按钮组的识别名称
value：设置的每一项的值（名称）
checked：默认被选中,即刚打开该网页时就会选中该项
5）多行文本框（双标签，上边的都是单标签）（比如翻译框）
语法：
<textarea row="10" cols="80" name="content"></textarea>
属性：
name 多行文本框的识别名称
value 注意，不要出现value，如果想显示默认的信息，在<textarea></textarea>之间直接输入
rows 显示多少行内容 eg：rows=“10” 即空间最多显示10行
cols 一行显示多少个字符 eg：cols=“60” 即一行的空间能显示60个字符

6）下拉列表（由多个标签组成）（比如公司所在的部门）
语法：
<select>
<option>给客户看的内容</option>
<option>给客户看的内容</option>
...
</select>
select的属性：

name 下拉列表的识别名

value 代表每一项的初始值

7) 隐藏域

隐藏起来不是给客户看，是给程序用的。

语法：<inputtype=”hidden” name=”id1”/>

8）文件域（上传头像，附件的功能）

语法：

<inputtype=”file”/>

属性：

name文件域的识别名称

value 注意一定不用写，而是通过单击按钮来选择文件，选择的文件就是value值，value是只读属性。

9）按钮

提交按钮 <input type=”submit”value=”按钮上的文字”>

----图片按钮（属于提交按钮的一种）：

重置按钮 <inputtype="reset" value="重新填写"><br/>恢复到默认设置的状态

普通按钮 <input type=”button”value=”按钮上的文字”>

本身没有任何功能，结合程序构成功能

eg: <input type="button" value="投票" οnclick="javascript:window.alert('你多次投票，注水了呀')">

代码案例：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="XX.php">
        username:<input type="text" name="username" size="30"
                        maxlength="8" value="please input username"/><br/>
        telephone:<input type="text" name="telephone" size="30" maxlength="20"><br/>
        E-mail account<input type="text" name="email" size="30" maxlength="20"><br/>
        password<input type="password" name="pwd" size="30" maxlength="5" value="111"
                       disabled="disabled"><br/>
        sex male<input type="radio" name="sex" value="male">
            female<input type="radio" name="sex" value="female"><br/>
        hobby <input type="checkbox" name="hobby" value="movie" checked="checked">movie
              <input type="checkbox" name="hobby" value="sing">sing
              <input type="checkbox" name="hobby" value="dance">dance
              <input type="checkbox" name="hobby" value="eta">eta
              <input type="checkbox" name="hobby" value="spot">spot<br/>
        tell <textarea row="10" cols="80" name="content">
        please input Message content</textarea><br/>
        city<select name="city">
                <option>where are you from</option>
                <option value="bj">bejing</option>
        <!--（若没有定义value的值，则value默认的为<option></option>标签之间的值）-->
                <option>hebei</option>
                <option>henan</option>
                <option>hubei</option>
            </select>
        <input type="submit" value="submit">
    </form>
</body>
</html>