html的入门篇

xiaoxiao2021-02-28  92

Html 介绍

特殊标签: 空格

1.什么是html ?

  html是用来描述网页的一种语言      1.0 HTML 值的是超文本标记语言   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

<body>    <div style="background-color: red;">div1</div>  <div style="background-color: green;">div2</div>  <span style="background-color: blue;">span1</span>  <span style="background-color: pink;">span2</span>   </body>

文体标签

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://

          2.

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

                    <a href="#top">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     <!--top--> 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     <!--content--> 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标签

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

常用属性:

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

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

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

 

2. link标签

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

<link>只能存在于 head 部分,不过它可出现任何次数。

常用属性:

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 10表示不要边框,1表示要显示边框。

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

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

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

2. <frame>

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

常用属性:

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

l name:定义此框架的名称

l frameborder:定义框架的边框,其值可以有0 10表示不要边框,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)