HTML基本结构与标签总结整理篇

时间:2021-12-01 17:05:05

HTML基本结构与标签总结整理篇

前言:这是笔者的学习总结与整理,如果有错误或疑问的地方,欢迎指正与讨论!另:此文会不定时更新~

  1.了解HTML

  学习前端技术,必然涉及三个方面:html(结构)、css(表现)、js(行为),本文整理的就是html的基本内容。html是超文本标记语言,其中“超文本”是指网页内可以包含文字、图片、链接等内容。

  html4.01、xhtml、html5之间的区别(面试可能会遇到):

  现在主流是使用html5语言,而html5与之前的html4.01和xhtml的区别从历史顺序来看,是html4.01—>xhtml—>html5。在html4.01及之前的语言标准不是很规范,都是程序员先实现后有标准,为了规范HTML语言,W3C(万维网联盟)结合XML和HTML4.01制定了xhtml,此种标准很严格,每种标签必须闭合,每种属性必须用引号包住。后来由于xhtml缺乏交互性,于是就出现了html5,在网页的第一行写<!DOCTYPE html>,它就是一个html5页面。

  2.html的基本结构

  html文档有三部分:文档声明、<head>“头”部分</head>、<body>主体部分</body>。其中头部提供页面的信息,主体部分提高页面具体内容。

以下为html的基本结构:

 <!DOCTYPE html>
<!--
这是一个文档声明,html5已经简化成上述样式
注意事项:文档声明必须有,而且必须在文档页面的第一行
-->
<html>
<head>
<meta charset="UTF-8">
<title>此处标题</title>
</head>
<body>
网页内容
</body>
</html>

  3.html的基本标签

  首先所有的html标签必须是闭合标签,即必须是“<...>”形式。标签一般是成对出现的,比如<title>...</title>;也可以是自闭合标签,比如:<img />; 也就是说/表示这一个或者一对标签的闭合。

  3.1 <head></head>标签:网页的头部,存放网页的摘要信息,有利于浏览器的解析以及搜索引擎的搜索。Head中常见的标签有两种,title和meta;

  3.1.1<title> </title> : 网页标题

  3.1.2<meta></meta>: 用于给浏览器和搜索引擎看,描述文档类型和编码,可以描述文档的关键字keywords和描述description。

            常见的写法有两种:

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="html5,网页制作,前端学习" />         
           1.charset:设置文档的字符集编码格式
               》》常见的几种字符集编码格式:
                  UTF-8:万国码(兼容所有国家编码) 又称Unicode(Unicode8/Unicode16)常用!
                  GB-2312:GB 万国码 简体中文
                  GBK:扩展的国际码
           2.http-equiv:将信息写给浏览器看,让浏览器按照这里的要求执行,需要配合content使用
                                               (http-equiv属性只是表明需要设置那部分,具体的设置内容,放到content属性中)
                  可选属性值:content-type(文档类型)、refresh(自动刷新)、set-cookie(设置浏览器cookie缓存)
          3.name:使用方法同http-equiv,要配合content使用,将我们的信息写给搜索引擎看
              常用属性值:author(作者)、keywords(关键字)、description(网页描述)
              这三个属性设置,网页必不可少 
         <meta name="author" content="http://www.jierui.com" />
<!--作者-->
<meta name="keywords" content="html5,网页制作,前端学习" />
<!--多个关键字用英文逗号分隔-->
<meta name="description" content="烟台旅游,电话:0535-6680131专为您提供出境游、国内游、周边游、签证等服务,带您开启愉快之旅!"/>
<!--搜索网站时,title下面的显示解释文字,至关重要!-->
<title>烟台国际旅行社</title>
<!--网页的标题,即网页的选项卡上的文字-->

  3.1.3<link></link>标签:连接网页和其他文件     

          常用:使用link标签连接网页图标;例如title前面的小loge
          rel属性:声明超文本的类型,此处选icon(图标)
          href属性:连接的路径地址
          type属性:可以省略

<link rel="icon" href="ivicon.png" />

  3.2 <body></body>主体部分

     a.块级标签:显示为块,前后隔一行(自动换行,且行间距大)。
       b.行级标签:按行从左往右逐一显示。

   3.2.1 html常见的块级标签

    a:换行符<br/>

    b:水平线<hr/>    

    c:标题标签<h1></h1><h1></h1>......<h6></h6>   特点:h1最大,h6最小,自动加粗。

    d:段落标签<p></p>

    e:预格式标签<pre></pre>:浏览器默认显示样式,即显示为等宽字体;保留代码中的换行、空格等元素在浏览器中的格式。

    f:引用标签<blockquote></blockquote>:重要的cite属性表明引用的来源,一般为网址,且网址不会在网页中展示,浏览器一般显示为首行缩进,此标签的目的是实现编程语言的语义化。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见的块级标签</title>
</head>
<body>
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<br/>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<hr/>
<h6>h6标题标签</h6> <p>这是段落标签</p>
<p>第二行</p>
<pre>一二三四五
一二三四五
</pre>
<blockquote cite="此处一般为网址">
近朱者赤,近墨者黑
</blockquote>
</body>
</html>

  

  3.2.2 html基于布局的块级标签

  列表分为:无序列表 ;有序列表; 定义列表

  a.有序列表
       <ol> (order list缩写)
         <li>...</li> 列表项可以有n多个
         <li>...</li>
         <li>...</li>
       </ol>

   b.无序列表
       <ul> (unorder list)
         <li>...</li> n多个
         <li>...</li>
         <li>...</li>
       </ul>

  c.定义描述列表
       <dl>
         <dt>一般只有一项</dt> (列表标题:标题顶格显示)
         <dd>可以有很多项</dd> (列表描述项:描述项相对标题缩进显示)
         <dd>...</dd>
         <dd>...</dd>
       </dl>

  注意:嵌套时,HTML标签一定不能交叉!!

   d.组合标签 显示效果:上面是图片,下面是图片的标题,同时图片和标题前代缩进。
       <figure>
         <img src="..."/>   ( 图片 )
         <figcaption>...</figcaption>   ( 图片的标题 )
       </figure>

  e.分区标签:可以包裹任何标签,也可以被包裹进任何标签,用于把页面划分为不同的分区,可以通过CSS设置宽度、高度、边框、背景色各种属性。

   <div>...</div>

  就不举例子了,上面的格式写的很清楚~

  3.2.3 html的行级标签

  a.<span>...</span>:文本

  b.<em>...</em>:强调

  c.<strong>...</strong>:强调 

  [注意] 1.强调程度来说: strong>em;
      2.HTML5语言,要求标签尽可能的实现语义化。(strong与em所包含的b与i不具备的强调含义)

  d.<i>...</i>:倾斜

  e.<b>...</b>:加粗

  f.<q>...</q>:短引用,与blockquote(长引用)对比,无引号

  g.<small>...</small>(缩小字体)与<big>...</big>(放大字体) 【两者可以多重嵌套,但不常用】

  以上标签较简单,自己多练习即可,无需举例~

  h.<img src="..."/>:图片

    1.src: 表示引用图片的地址
    路径地址的写法:a.★相对路径:以当前文件为准去寻找图片地址。
                   与当前文件处于同一层的图片直接写图片及其后缀名;
                   图片在当前文件下一层:文件夹名/图片名
                   图片在当前文件上一层:../图片名
            b.绝对路径:严禁使用!!例如file:///D:/文件夹/图片.后缀名
            c.网络地址:网络上的图片链接。但是,一般不使用。
    2.height width : 图片的高度和宽度,可以用css样式(style="height: ;width: ;")所代替
    3.title :图片的标题,当鼠标之上后显示的文字。
    4.alt:当图片无法加载的时候显示的文字。
    *5.align:图片两边文字所对应图片的位置。(top center bottom)

         <img src="ivicon.png" />
<img src="练习用图/ivicon.png" />
<img src="../img/ivicon.png"/>
<!--以上为相对路径写法--> <img src="此处为路径"/>
<!--以上为绝对路径写法--> <img src="此处为网络地址"/>
<!--以上为网络地址写法-->

  i.<a>...</a>:超链接

    1.href="...":超链接的路径(网络连接或者本地文件),路径确定同img。
    2.target:_blank 新页面打开 _self 自身页面跳转
    3.title:同上
    4.rel(了解):指定当前文档与被连接文档的关系,实现语义化
          prev(前一片)
          next(后一篇)
          ★icon (被链接图片是当前文档的图标)
          ★stylesheet(被链接文档是当前文档的样式表)
          prefetch(预加载,当你在当前文档加载完成,利用空余时间,预加载即将链接文档)
    5.锚链接:
        a.本页面锚链接 s1.设置锚点<a name="top"></a> 当我点击超链接时,跳转到指定位置
                s2.在超链接上使用<a href="#top">...</a> 跳转到对应锚点
        b.页面间锚链接:在即将跳转的页面某位置设定锚点<a name="name"></a>
                在超链接的href属性中使用"页面地址.html#name"
        6.功能性链接:
               mailto:邮箱地址 用于给指定邮箱发送文件
               tencen://message/?uin=qq号码 给指定qq发送消息

        <a name="weixin">     <!--锚链接的跳转点,与后面的代码呼应 -->
<img src="练习用图/ivicon.png" style="height:100px ;width:100px ;"title="哈啊哈" alt="这里没显示"/>
</a>
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#weixin" target="_self">这是一个超链接,去看微信的</a>
<a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一,自身跳转的</a>
<a href="mailto:471612939@qq.com">这里发邮件</a>
<a href="tencen://message/?uin=2572035894">这里发信息</a>
<a href="ivicon.png" target="_blank">picture</a>

  3.2.4表格元素:行 列 格

  表格 <table></table>
  表格的行 <tr></tr>
  每行中的列 <td></td>
  表格的表头 <th></th> 默认加粗,单元格居中

  1、table的常见属性:
     a. border 边框,其增大时,只增加外围框线,单元格边框始终为1像素
     b. cellspacing 单元格之间的间隙距离,当=0的时候,只会是单元格的间隙等于0,但不会合并边框线,此时表格中线为两个像素,若想使其合并,则

     ★使用 style="border-collapse:collapse"★
     c. cellpadding 单元格里边的文字与边框线的距离(不常用)
     d. width height 宽度和高度
     e. align 表格的对齐方式:【left right center】
    【注意事项:相当于让表格浮动,会影响其后的元素的原有排列方式】
    f. bgcolor 单元格的背景色,等同于style="background-color:;"
    g. background 单元格的背景图片,等同于style="background-image:...;",且背景图会覆盖背景色
    h. bordercolor 边框的颜色

  2、tr td(th)相关属性
    a. width height 单元格的宽度和高度
    b. bgcolor 单元格的背景颜色
    c. align (left right center)单元格中的文字水平对齐方式(text-align 文本居中)
    d. valign (top center bottom)单元格中的文字垂直对齐方式
    e. nowrap 单元格中文字不换行
    【注意】当表格属性与行列属性相冲突时,以行列属性为准(近者优先!!!)
        table中的align控制表格在整个浏览器中的显示位置!
        单元格中的align控制其中文字在单元格中的对齐方式!
        表格的align属性并不影响单元格内文字的水平对齐方式!
        tr的align属性可以控制一行中所有单元格的水平对齐方式!

  3、表格的跨行和跨列
    跨列:colspan="n列" N行对应删除右边N-1行
    跨行:rowspan="n行" N列对应删除右边N-1列

 <table width="500" height="200" border="5" style="border-collapse:collapse"
cellpadding="20" align="center" bgcolor="aqua" bordercolor="red">
<caption>我是表格的标题</caption>
<tr>
<th bgcolor=coral>表头1</th>
<th colspan="3">表头2</th>
</tr>
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr> </table>

此代码的效果图如下:

HTML基本结构与标签总结整理篇

  3.2.5 表单<form>...</form>

  基本属性:actionmethod

  内涵常用标签:input、select、textarea、fieldset

  对于属性action:指定由服务器上哪个处理程序处理;写法:action="提交的服务器地址 "

  对于属性method:规定提交的数据方法;写法:method="提交的数据方法"   [get/post]       

      getpost的区别:
            get :使用URL传参:http://服务器地址?name1=value1&name2=value2
               [?表示传递参数,?后面采用name=value的形式传递,多个参数之间,用&连接]
               url传递参数不安全,所有信息都可以在地址栏看到,并且可以通过地址栏随意传递其他数据
               url传递数据有限,只能传递少量数据
            post:使用Http请求传递数据时,url地址栏不可见,比较安全,且传递数据没有限制

下图为get传参,信息泄露:

HTML基本结构与标签总结整理篇

下图为post传参:

HTML基本结构与标签总结整理篇

  <input> 标签及属性:
    a. type:表示Input输入的类型,可选值有:
    b. name:input输入框的别名,一般情况下,必填,因为传递数据时,使用name=value的形式传递
    c. value:input输入框的默认值
    d. placeholder:input的提示内容,当输入框使用value时,提示内容消失
    e. 特殊属性值:
          checked="checked"默认选中
          disabled="disabled"设置控制不能使用;用在按钮上不能点击,用在输入框上不能修改;而且,如果输入框disabled,则输入框信息不能往后台传递
          hidden="hidden"隐藏,等同于<input type="hidden" name="username" value="某某某"/>常用于配合disabled,或根据其他需要,使用隐藏域传递数据
    f. (了解)tabindex="1":控制tab键的跳转顺序,从最小的数值开始,逐步往大的数跳转,获得焦点。

    【input-type】 属性详解:
      a. text:文本输入框
      b. password:密码输入框,输入内容时显示小黑点
      c. radio:单选按钮
      d. checkbox:复选按钮
       》》name和value按钮必须同时存在,提交时,提交的是value中的属性值
         例如:<input type="radio" name="sex" value="女"/>提交时,显示"sex=女"
       》》radio凭借name属性区分是否为同一组,name相同为同组,同组当中只能选一个
       》》checked="checked"默认选中 【radio只能选一个,checkbox可以选多个】
      e. file:文件上传按钮
      f. submit:提交按钮,提交表单数据
      g. reset:重置按钮,将表单数据重置为初始状态
      h. image:图形提交按钮,功能同submit,可以提交数据
      i. button:普通按钮,没有任何功能

  <select>下拉选择控件:
    1.写法:<select>
          <option>...</option>
        </select>
    2.name属性,写在<select>里,所有选项只有一个name
    3.option 常用属性:
      value="": 当option没有属性时,往后台传递的是<option></option>标签中的文字,当option有value属性时,往后台传递的是value属性值
      title="":鼠标指向后显示的文字
      selected="selected":默认选中
    4.multiple:设置select为多选。(一般不用,体验太差;ctrl+鼠标 进行多选)
    5.<optgroup lable="山东省"></optgroup>:用于将option分组,lable表示组名

  <textarea>文本域:
    1.写法:<textarea></textarea>
    2.设置宽高style="width=100px;height=100px;";自身有cols="";rows=""两个属性,但不常用
    3.readonly="readonly":不允许编辑
    4.style="resize=none":固定宽高,将其设置为不允许修改宽高
    5.style="overflow=”...":设置当文字超出区域时,如何处理
      》》 常用属性值:hidden 超出区域的文字隐藏,不显示
               scroll 无论文字多少,均会显示滚动
               auto 自动,根据文字多少,自动决定是否显示滚动条(默认设置)
  <fieldset>表单的边框与标题:
    写法:<fieldset> //边框
        <legend>...</legend> //表单的标题
      </fieldset>
    》》如果想要让标题嵌入到边框中,需将标题标签写到边框标签里面
    》》一个表单,可以有多组边框+标题组合

以下为某个表单代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合作意向表</title>
</head>
<body>
<form action="D3-HTML基本标签之表格.html" method="post">
<table border="1" style="border-collapse: collapse;border-color: lightgray;" width="450"height="380" align="center">
<tr><td>
<h2 style="font-family: '微软雅黑';"><span style="color: orange;">&nbsp;&nbsp;&nbsp;合作</span>意向表</h2>
<p style="color: orange;font-family: '微软雅黑' ;font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;我们在收到您的需求后,会在第一时间与您联系</p>
<table style="font-family: '微软雅黑';font-size: 14px;" width="400" align="center">
<tr>
<td width="90" >公司名称:</td>
<td ><input type="text" name="campanyname" style="width: 300px;"/></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="username"style="width: 300px;"/></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="tel" name="tel"style="width: 300px;"/></td>
</tr>
</table>
<table width="400" style="font-family: '微软雅黑';font-size: 14px;" align="center">
<tr>
<td colspan="2" style="color: orange;">您需要的服务</td>
</tr>
<tr>
<td><input type="checkbox" name="save" value="网站建设与传播"/>网站建设与传播</td>
<td><input type="checkbox" name="save" value="电子商务"/>电子商务</td>
</tr>
<tr>
<td><input type="checkbox" name="save" value="数字化展馆"/>数字化展馆</td>
<td><input type="checkbox" name="save" value="多媒体互动"/>多媒体互动</td>
</tr>
<tr>
<td><input type="checkbox" name="save" value="软件服务"/>软件服务</td>
<td><input type="checkbox" name="save" value="移动开发"/>移动开发</td>
</tr>
<tr>
<td colspan="2" align="center" ><br/>
<input type="submit" name="submit" id="submit" value="提交+" style="background-color: orange;color: white;border-color: orange;"/>
</td>
</tr>
</table>
</td></tr> </table>
</form> </body>
</html>

效果图:

 HTML基本结构与标签总结整理篇

  转载请注明出处