html的入门篇

xiaoxiao2021-02-28 92

Html 介绍

特殊标签：空格

1.什么是html ？

html是用来描述网页的一种语言 1.0 ＨＴＭＬ值的是超文本标记语言　 2.0 HTML 不是一种编程语言 3.0标记语言是一套标记标签 4.0HTML使用标记标签来描述网页

2.HTML的作用？

Web浏览器的作用是读取html文档，并以网页的形式显示他们。浏览器不会显示HTML标签，而是使用标签来解释页面上的内容 HTML就是用来展示信息的。

3. HTML书写规范

a HTML标签 a.0 HTML标签是有尖括号包围的关键词，比如<html> a.1 HTML标签通常是成对出现的。比如<b>和 </b> a.2 标签对中，第一个标签是开始标签，第二个标签是结束标签 a.3 绝大多数标签都具有属性，建议属性值使用引号引起。例如<body> text="red"> a.4 大多数标签是可以嵌套的 b html 的创建 HTML可以用文本编辑器来创建，保存的时候后缀名为html或者htm，整个文件夹在<html>与</html>标签之间，在<html> 标签之间有<head>和<body> c 空的HTML标签 <br/>关闭空元素的正确方式 d html 大小写不敏感 <P>等同于<p> 建议使用小写

文件标签

1.HTML标签

整个文件都处在<html>标签中 <html> 用以声明这是HTML文件，让浏览器认出并且正确处理这个HTML文件在HTML文件有两部分<head>与<body>

2.head标签

<head>用于加载一些重要的资讯它的内容不会被显示，只有<body>的内容才会被显示

3.title 标签

<title>只能出现于<head>中，它代表的是标题

4.body标签

<body>中的内容会被显示。常用属性： text : 用于设定文字颜色 background 用于设定背景图片 bgcolor 用于设定背景颜色

5.关于HTML中的颜色取值

颜色由红绿蓝混合而成有三种取值方式： 1.rgb(0.0.0) 值在0- 255之间 2. #000000 #ffffff 3. red green blue

排版标签

1.注释在html中的注释是 2.p标签 <p>标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。 <p>标签的常用属性 align 用于设定对齐方式，可选 legt right center 默认值是left 3.br 标签 <br>标签是换行标签 4.hr 标签 <hr>标签会生成一条水平线常用属性： align 设置水平对齐方式，可选 left right center size 设置水平厚度以像素为单位。默认为2 width 设置水平线长度，可以是绝对值或相对值，默认为100% color 设置水平线颜色，默认为黑色 5.关于HTML中的数值单位 html的数值默认单位为像素（px） <hr size='3'> 这个代表水平线的厚度为3px <hr width='30%'>这个代表水平线的长度为总长度的30% <body> 静夜诗<br /> 李白<br /> <hr width="200px" size="2" color="red" align="left" /> <p align="center"> 窗前明月光<br /> </p> 疑是地上霜 </body>

块标签:

1.div标签用于在文档中设定一块区域常用属性：align:left center right 2. span标签用于在行内设定一块区域。

html中绝大多数元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始。例如 div p等

内联元素在浏览器显示时，通常不会以新行来开始。span

文体标签

1.font <font>用于规定文本的字体，大小，颜色常用属性 face:规定文本的字体 size:规定文本的大小最大值 7 最小值 1 color:规定文本的颜色 2.h1 - h6 标题标签 <h1> - <h6>标签用于定义标题 <h1>最大标题 <h6>最小标题 <body> <font color="red" size="1" face="微软雅黑">最帅</font> <br /> <font color="red" size="2" face="微软雅黑">最帅</font><br /> <font color="red" size="7" face="微软雅黑">最帅</font><br /> <hr />  <h1>你好</h1> <h2>你好</h2> <h6>你好</h6> </body>

列表标签

1. ul

<ul>标签表示的是一个无序列表。

常用属性:

type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc

2. li

<li>标签表示的是一个列表项

常用属性:

type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc

value:这个属性只适用于有序列表，用于设定列表的项目数字

3. ol

<ol>表示的是一个有序列表。

常用属性:

type:这个属性规定列表中使用的标记类型。可取值1 A a I i.

start:这个属性规定列表的起始值是数值

1 <body> 2 <ul type="square"> 3  4 <li type="1">我是大帅哥</li> 5 <li type="1">我是大帅哥</li> 6 <li type="1">我是大帅哥</li> 7 8  9 <ol type="a" start="5"> 10 <li type="a">我是大帅哥</li> 11 <li type="a">我是大帅哥</li> 12 <li type="a">我是大帅哥</li> 13 </ol> 14 </ul>

图形标签

1. img

<img>是一个图片标签，用于在页面上引入图片.

常用属性：

src:用于设定要引入的图片的url

alt:用于设定图像的替代文字

width:用于设定图片的宽度

height:用于设定图片的高度

border：图片边框厚度

align:用于设定图片的文字的对齐方式 top middle botom

1 <body> 2 <img src="img/1.png" alt="帅哥" width="50%" height="50%" border="5" align="bottom"/> 3 我是一个文本 4 </body>

链接标签

1. a

<a>标签用于定义超连接，用于从一个页面链接到另一个页面。

常用属性:

href:用于设定链接指向页面的url.

1.访问互联网的时候要加协议http://

例子：<a name="top"></a>

name:用于设定锚的名称

target:用于设定在何处打开链接页面。

_self 默认是self 覆盖本网页打开链接

—_blank 另起一个新的页面，打开链

例子

1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title></title> 5 </head> 6 <body> 7 <a href="http://www.baidu.com" target="_self">我是百度</a> 8 <a name="top"></a> 9 你好<br> 10 你好<br> 11 你好<br> 12 你好<br> 13 你好<br> 14 你好<br> 15 你好<br> 16 你好<br> 17 <a href="#top">返回顶部</a> 18 </body> 19 </html> 20

表格标签

1. table

<table>标签用于定义表格

常用属性:

align:用于设定表格的对齐方式

bgcolor:用于设定表格的背景颜色。

border:用于设定表格边框的宽度

width:用于规定表格的宽度。

2. tr

<tr>标签用于定义表格的行,包含一个或多个th或td元素。

<tr>常用属性:

align:用于设定表格中行的内容对齐方式。

bgcolor:用于设定表格中行的背景颜色。

3. td

<td>标签用于定义表格单元

td元素中的文本一般显示为正常字体且左对齐。

<td>常用属性:

align:用于设定单元格内容的对齐方式。

bgcolor:用于设定单元格背景颜色。l height:用于设定单元格的高度。

width:用于设定单元格的宽度。

colspan:用于设定列合并

rowspan:用于设定行合并。

4. caption

<caption>用于定义表格标题

<caption>标签必须紧随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。

5. th

<th>标签用于定义表格的表头，<th>内部的文本通常呈现为居中加粗文本。

Html表格中有两种类型的单元格：

表头单元格th:包含表头信息。

标准单元格td:包含数据。

6. thead

<thead>标签用于定义表格的页眉

<thead>标签用于组合HTML表格的表头内容。

<thead>元素应该与<tbody>和<tfoot>元素结合起来使用。

注意:<thead>内部必须有<tr>标签。

7. tbody

<tbody>标签用于定义表格的主体

<tbody>标签用于组合HTML表格的主体内容。

8. tfoot

<tfoot>标签用于定义表格的页脚

<tfoot>标签用于组合HTML表格中的表注内容。

9.<hr/>一横线

例子

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>王小虎虎的HTML</title> 5 </head> 6 <body> 7  8 <table border="1" with="30%" align="center" bgcolor="yellow"> 9 <caption>王虎最帅</caption> 10 <tr align="center"> 11 <th>姓名</th> 12 <th>性别</th> 13 <th>婚否</th> 14 </tr> 15 <tr align="center"> 16 <td rowspan="2">虎</td> 17 <td colspan="2">18</td> 18 </tr> 19 <tr align="center"> 20 <td>是</td> 21 <td>否</td> 22 </tr> 23 </table> 24 25 <hr/> 26 </body> 27 </html> 28

书城的demo

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>文藏图书商城</title> 6 </head> 7 <body> 8 <div id="page"> 9  10 <div id="top"> 11 <table width="100%"> 12 <tr> 13 <td width="70%"> 14 <img alt="logo" src="img/logo.png" /> 15 </td> 16 <td > 17 <img alt="cart" src="img/cart.gif"/> 18 <a href="#">购物车</a> 19 <a href="#">帮助中心</a> 20 <a href="#">登录</a> 21 <a href="#">注册</a> 22 </td> 23 </tr> 24 </table> 25 </div> 26 <div id="menu"> 27 <table width="100%" bgcolor="#1C3F09"> 28 <tr align="center"> 29 <td> 30 <a href="http://www.baidu.com"><font color="#ffffff" size="5">紫禁城</font></a> 31 <a href="http://www.baidu.com"><font color="#ffffff" size="5">中国收藏</font></a> 32 <a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏投资导刊</font></a> 33 <a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏家</font></a> 34 <a href="http://www.baidu.com"><font color="#ffffff" size="5">玉委会</font></a> 35 <a href="http://www.baidu.com"><font color="#ffffff" size="5">文藏头条</font></a> 36 </td> 37 </tr> 38 </table> 39 </div> 40 <div id="search"> 41 <table width="100%" bgcolor="#B6B684"> 42 <tr align="right"> 43 <td> 44 <font color="#ffffff" size="5">搜索</font> 45 <input type="text" /> 46 <input type="button" value="搜索" /> 47 </td> 48 </tr> 49 </table> 50 </div> 51  52 <div id="content"> 53 <div align="right"> 54 <font color="darkgreen" size="5">首页</font> > 55 <font color="darkgreen" size="5">图书列表</font> > 56 </div> 57 <h1>商品目录</h1> 58 <hr /> 59 <h1>北京华星成汇发展有限公司明星杂志</h1> 60 <span>共计6种产品</span> 61 <hr /> 62 </div> 63 <div> 64 <img alt="productlist" src="img/productlist.gif" width="100%"/> 65 </div> 66  67 <div> 68 <table width="100%"> 69 <tr align="center"> 70 <td> 71 <div> 72 <img alt="紫禁城" src="zhijincheng/zhijingcheng01.jpg" width="30%" height="35%"/> 73 </div> 74 <div> 75 <span> 76 <span>书名：紫禁城一月刊</span><br /> 77 <span>价格：99$</span> 78 </span> 79 </div> 80 </td> 81 <td> 82 <div> 83 <img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 84 </div> 85 <div> 86 <span> 87 <span>书名：紫禁城二月刊</span><br /> 88 <span>价格：199$</span> 89 </span> 90 </div> 91 </td> 92 <td> 93 <div> 94 <img alt="紫禁城" src="zhijincheng/zhijingcheng03.jpg" width="30%" height="35%"/> 95 </div> 96 <div> 97 <span> 98 <span>书名：紫禁城三月刊</span><br /> 99 <span>价格：299$</span> 100 </span> 101 </div> 102 </td> 103 <td> 104 <div> 105 <img alt="紫禁城" src="zhijincheng/zhijingcheng04.jpg" width="30%" height="35%"/> 106 </div> 107 <div> 108 <span> 109 <span>书名：紫禁城四月刊</span><br /> 110 <span>价格：399$</span> 111 </span> 112 </div> 113 </td> 114 <td> 115 <div> 116 <img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 117 </div> 118 <div> 119 <span> 120 <span>书名：紫禁城五月刊</span><br /> 121 <span>价格：499$</span> 122 </span> 123 </div> 124 </td> 125 <td> 126 <div> 127 <img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 128 </div> 129 <div> 130 <span> 131 <span>书名：紫禁城二月刊</span><br /> 132 <span>价格：699$</span> 133 </span> 134 </div> 135 </td> 136 </tr> 137 </table> 138 </div> 139 </div> 140 </body> 141 </html> 142

表单标签

1.from标签 <from></from>标签代表一个表单，表单用于向服务器传输数据 <from>标签能够包含<input>,可以是文本字段。复选框。单选框或者提交按钮等，还可以包含<textarea> <select>等 <from>常用属性： 01. name 用于定义表单的名称 02. action 用于规定提交表单时候向何处发送表单数据 03 mehtod 用于规定提交方式，一般是post或者get 关于post与get方式的区别： 1.get方式只能提交少量数据，post可以携带大数据 2.get方式提交时，数据会在地址栏上显示，安全性差。post方式提交不会再地址栏上显示数据，更加安全。

input 种类

<input> 标签用于搜集用户信息根据不同的type属性值，输入多种类型字段。例如：文本字段，复选框，掩码后的文本控件 <input type="text"> 定义单行的输入字段，用户可在其输入文本。默认宽度为20个字符 name：定义标签的名称 value ：定义标签值 size 定义输入字段的长度 maxlength ：定义输入可输入最大字符个数 <input type="password"> 定义密码字段。该字段的字符被掩码 name：定义标签的名称 value ：定义标签值 size 定义输入字段的长度 maxlength ：定义输入可输入最大字符个数 <input type="radio"> 定义单选按钮 name ：定义标签名称注意：对于单选按钮，如果想要做到单一选择，多个radio的name值必须一样 value ：定义标签的值 checked ：定义该标签默认被选中 <input type=“button”> 定义可点击按钮 name ：定义标签名称 value ：按钮显示名称 <input type=“hidden”> 定义隐藏的输入字段 name ：定义标签的名称 value ：定义标签值 <input type=“file”> 定义输入字段和“浏览”按钮，供文件上传 name 定义标签名称 <input type=“submit”> 定义提交按钮。提交按钮会把表单数据发送到服务器 name ：定义标签名称 value ：按钮 <input type=“reset”> 定义重置按钮。重置按钮会清除表单中的所有数据 name ：定义标签名称 value ：按钮显示名称 <input type=“image”> 定义图形形式的提交按钮 name ：定义标签名称 src ：图片url alt ：图像的替代文本

select 与option标签

1.<slect> 用于定义下拉列表属性： name：定义下拉列表的名称 size：定义下拉列表可见选项的数目 multiple ：定义可选择多个选项 2.<option> 用于定义下拉列表中的选项，需要为与<select>内部属性： value ：定义送往服务器的选项值 selected ：定义选项为选中状态

textarea 标签

<textarea> 标签用于定义一个多行文本输入控件属性： name：定义多行文本框名称 cols ：定义多行文本框可见宽度 rows ：定义多行文本框可见行数 wrap ：规定多行文本框中文字如何换行表单实例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 </head> 7 <body> 8 <form name="myfrom" action="#" method="post"> 9 <tr> 10 <td> 11 姓名 12 </td> 13 <td> 14 <input type="text" name="username" value="wanghu"/> 15 </td> 16 </tr> 17 <br /> 18 <tr> 19 <td> 20 密码 21 </td> 22 <td> 23 <input type="password" name="username" value="123456"/> 24 </td> 25 </tr> 26 <br /> 27 <tr> 28 <td> 29 性别 30 </td> 31 <td> 32 <input type="radio" name="sex" checked="checked" /> 男 33 <input type="radio" name="sex" /> 女 34 </td> 35 36 </tr> 37 <br /> 38 <tr> 39 <td> 40 爱好 41 </td> 42 <td> 43 <input type="checkbox" name="like" checked="checked" />足球 44 <input type="checkbox" name="like" />篮球 45 <input type="checkbox" name="like" />排球 46 </td> 47 </tr> 48 <br /> 49 <tr> 50 <td> 51 地址 52 </td> 53 <td> 54 <select name="省" > 55 <option value="bj">北京</option> 56 <option>上海</option> 57 <option>天津</option> 58 <option>武汉</option> 59 </select> 60 61 <select name="区" > 62 <option >朝阳区</option> 63 <option>海淀区</option> 64 <option>大兴区</option> 65 </select> 66 </td> 67 </tr> 68 <br /> 69 <tr> 70 <td> 71 邮箱 72 </td> 73 <td> 74 <input type="email" /> 75 </td> 76 </tr> 77 <br /> 78 <tr> 79 <td> 80 上传头像 81 </td> 82 <td> 83 <input type="file" /> 84 </td> 85 </tr> 86 <br /> 87 <tr> 88 <td> 89 备注 90 </td> 91 <td> 92 <textarea cols="30" rows="10">文本域</textarea> 93 </td> 94 </tr> 95 <br /> 96 <tr> 97 <input type="submit" value="提交信息" /> 98 </tr> 99 </form> 100 </body> 101 </html> 102

其它标签与特殊字符

1. 其它标签

1. meta标签

常用属性：

l content:定义与http-equiv或name属性相关的元信息

l http-equiv:把content属性关联到HTTP头部

l name:把content属性关联到一个名称。

2. link标签

常用属性:

l type:定义被链接的文档的MIME类型

l href:定义被链接的文档的URL href引入css文件的地址 src: js的文件地址

l rel:定义当前文档与被链接文档之间的关系。

关于<link>标签详细用法，我们会在css中介绍

2. 特殊字符

Html原始码

显示结果

描述

不断行的空白符

小于号

大于号

已注册

版权

框架标签

所谓框架就是将页面划分成几个窗框，就可以让我们在同一个浏览器中显示不止一个页面。

1. <frameset>

<frameset>是框架结构标签，它定义如果将窗口分割为框架.

注意:不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。

常用属性:

l cols:垂直切割

l rows:横向切割

l frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。

l border:定义框架的边框厚度

l bordercolor:定义框架的边框颜色

l framespacing:定义框架与框架之间的距离。

2. <frame>

<frame>是框架标签，它定义放置在每个框架中的页面。

常用属性:

l src:定义此框架要显示的页面url

l name:定义此框架的名称

l frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。

l framespacing:定义框架与框架之间的距离

l bordercolor:定义框架的边框颜色

l scrolling:定义是否显示卷轴，YES表示要显示，NO表示不显示，AUTO视情况而定。

l noresize:定义框架大小不可以改变。

l marginhight:定义框架高度部分边缘所保留的空间。

l marginwidth:定义框架宽度部分边缘所保留的空间。

3. <iframe>

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

常用属性:

l src:定义些框架要显示的页面url

l name:定义些框架的名称

l width:定义些框架的宽度

l height:定义些框架的高度

l marginwidth:定义插入的页面与框边所保留的宽度

l marginheight: 定义插入的页面与框边所保留的高度

l frameborder:定义框架的边框，1表示显示边框，0表示不显示

l scrolling:定义是否允许卷动，YES允许，NO不允许

代码

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <frameset rows="300,*"> 8 <frame src="index.html" /> 9 10 <frameset cols="300,*"> 11 <frame src="from.html"/> 12 <frameset cols="200,*"> 13 <frame src="from.html"/> 14 <frame name="right" src="https://www.baidu.com" /> 15 </frameset> 16 </frameset> 17 </frameset> 18 </html> 19 代码 left.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="https://www.baidu.com" target="right">百度</a> 9 <a href="http://www.sohu.com" target="right">火狐</a> 10 </body> 11 </html> 12 框架标签.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <frameset rows="300,*"> 8 <frame src="index.html" /> 9 10 <frameset cols="300,*"> 11 <frame src="left.html"/> 12 <frame name="right" /> 13 </frameset> 14 </frameset> 15 </html> 16

转载请注明原文地址: https://www.6miu.com/read-47158.html

技术

最新回复(0)