送给HTML的初学者——H5的基本结构和标签

时间:2021-08-29 19:43:06

这篇博客写给所有HTML的初学者,希望这篇博客可以对初学者有所帮助,同时也希望大家在学习HTML的道路上不怕艰险,不畏困难。

一、什么是HTML

HTML是HyperText Markup Language的缩写,翻译成中文是超文本标记语言,用于网页的创建。

二、HTML的基本结构

主要包括<!DOCTYPE html>文档类型、<head>头部和<body>主体三部分。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
三、HTML的头部

1、meta标签

1.1charset 设置文档的字符集编码格式

<meta charset="UTF-8">

常见的几种字符集编码格式:
                                    a.UTF-8 :万国码(最常用)。
                                    b.GB-2312 :国标码。
                                    c.GBK :扩展的国标码。

1.2name 将该网页的信息写给搜索引擎看

<meta name="keywords" content="这是搜索网页的关键字"/>
<meta name="description" content="这是网页的介绍"/>

第一行是网页的关键字,用于搜索该网页。第二行是网页的介绍。

常用的name属性值有:author(作者)keywords(关键字)description(网页描述)。

2、title标签——网页的标题

<title>这是网页的标题</title>
四、HTML的主体

1、标签的分类:块级标签和行级标签

1.1块级标签:显示为块状,前后隔一行(自动换行)

a.标题标签 <h1>到<h6>,h1最大,h6最小。

<h1>111111111111</h1>
<h2>111111111111</h2>
<h3>111111111111</h3>
<hr />
<!--水平线-->
<h4>111111111111</h4>
<h5>111111111111</h5>
<h6>111111111111</h6>
<hr />
 
b.<p></p>段落标签
 
c.<hr />水平线标签
 
d.<br/>换行标签
 
e.<pre></pre>预格式标签
<pre>这是预格式标签
                可以换行</pre>
        <!--预格式标签,可以保留代码的排版格式-->

 

f.<blockquote></blockquote>引用标签

 

g.有序列表ol和无序列表ul

<ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
 </ol>
<ul>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>

 

h.定义描述列表dl

<dl>

        <dt>定义列表标题</dt>

        <dd>描述项第一项</dd>

        <dd>描述项第二项</dd>

</dl>

 

i.分区标签

     <div></div>  可以包裹任何标签,也可以被包裹进任何标签。

 

1.2行级标签:按行从左往右逐一显示。
 
a.常用的行级标签:
 
<span>无实际意义,用于包裹某部分文字,修改特定样式</span> 
 
<em> 表示为强调,字体倾斜</em>
 
<strong> 表示强调,字体加粗</strong>
 
<i> 表示切斜,没有强调效果 </i>
 
<b> 表示加粗,没有强调效果</b>
 
<q>“表示短引用,自带双引号”</q>
 
<small> 字体比正常字体小一号,可以多重嵌套</small>
 
<big> 字体大一号</big>
 
<s>表示有误文本,删除线</s>
 
<cite> 表示引用,浏览器表示为倾斜</cite>
 
<bdo dir="ltr">表示文本方向,ltr:从左往右 rtl:从右往左</bdo>
 
X<sup>2</sup> X的平方  sup:上标文本 sub:下标文本
 
© &copy; 空格 &nbsp;
 
<u> 这是下划线标签</u>
 
<mark>高亮或标记文本 浏览器显示为黄色背景</mark>
        <span style="color: red;font-size: 33px;background-color: blue;">姜浩是我大哥</span>
        <!--color 字体颜色 font-size 字体大小 background-color 背景颜色 font-weight 加粗-->
        
        <em>表示为强调,字体倾斜</em>
        <strong>表示强调,字体加粗</strong>
        <i>表示切斜,没有强调效果</i>
        <b>表示加粗,没有强调效果</b>
        
        <q>表示短引用,自带双引号</q>
        <small>字体比正常字体小一号,可以多重嵌套</small>
        <big>字体大一号</big>
        <s>表为倾斜</cite>
        <code>表示计算机代码,但不会保留格式,需要配合示有误文本,删除线</s>
        <cite>表示引用,浏览器表示pre标签使用</code>
        <bdo dir="ltr">表示文本方向,ltr:从左往右      rtl:从右往左</bdo>
        X<sup>2</sup>
        <!--sup:上标文本 sub:下标文本-->
        <!--版权符号 空格-->
         © &copy;  空格&nbsp;
        <u>这是下划线标签</u>
        <mark>高亮或标记文本  浏览器显示为黄色背景</mark>   

 

b.超链接   <a href="" target=""></a>

        <a href="https://www.baidu.com/" target="_blank" title="打开百度">表示超链接</a>
        <!--href表示跳转的地址;
            target表示页面打开的位置:self自身页面打开(默认),blank新页面打开;
            title表示超链接的标题,也就是鼠标指上去显示的东西-->
        <a href="练习.html#bottom">打开超链接</a>
        <!--相对路径的三种情况:
        如果在同一文件夹,直接写“文件名.后缀”
        如果在下一层文件夹,写“文件夹名/文件名.后缀”
        如果在上层文件夹,写“../文件夹名/文件名.后缀”  ..的意思是上一层文件夹,类似后退-->

 

c.锚链接

自身页面锚链接:先定义锚点<a name=name1>、设置超链接跳转到锚点<a href="#name1">

 

页面间锚链接:先在另一个页面设置锚点<a name=name2></a>,然后在本页面跳转链接,<a href="链接地址#name2">

 

d.功能性连接mailto 用于给指定邮箱发送邮件   http   file   ftp

<a href="mailto:j.com" target="_self">点击就送</a>

 

2、table表格

 

2.1表格的结构

 

用tr表示行,td表示列;th表示表头,字体加粗居中;caption表示标题

        <table border="2" cellspacing="1" cellpadding="10" bordercolor="blue"  style="border-collapse: collapse;">
            <caption>表格的标题</caption>
            <tr>
                <td rowspan="2">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <td colspan="2">3-1</td>
                <td>3-2</td>
            </tr>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </table>

 

2.2表格的各种属性

 

a.border=1 表示边框,1是宽度 当border属性增大时,只有外围边框增大;

 

b.cellspacing:单元格之间的间隔;


c.cellpadding:单元格中的文字与边框的距离

 

d.style=“border-collapse:collapse;”,合并边框

 

e.width、height表示宽度和高度

 

f.bgcolor:背景颜色 可以用style=“background-color:”代替;bordercolor:边框颜色 background:背景图片

 

g.colspan=“2”表示该内容跨两列,rowspan=“2”表示该内容跨两行

 

h.align:表格在页面中的位置 left center right

2.3tr和td的相关属性


a.width、height 单元格的宽和高 bgcolor单元格的背景颜色

 

b.align:left center right 单元格中的文字,水平对齐方式

 

c.valign:top center bottom 单元格中的文字,垂直对齐方式

 

d.nowrap=“nowrap”单元格中的文字不换行

 

注意:当表格属性与行列属性冲突时,行列属性为准。(作用范围越小,优先级越高)

 

2.4表格的结构化 caption thead tbody tfoot

 

无论各部分写在表格的什么位置 caption会在表格外最上方, thead会在表格内最上方,tfoot会在最下方

 

3、form表单

 

<fieldset>
          <legend>用户注册</legend>
        <form action="" method="get" autocomplete="on">
            <table>
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username" id="username" value="111" /></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="mima"  placeholder="请输入密码" autofocus="autofocus"/></td>
                    <!--placeholder:提示属性-->
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男" /><input type="radio" name="sex" value="女" /></td>
                </tr>
                <tr>
                    <td>
                        喜欢的城市:
                    </td>
                    <td>
                        <select name="city">
                            <optgroup label="山东">
                              <option selected="selected">烟台</option>
                              <option>青岛</option>
                              <option>济南</option>
                              <option>济宁</option>
                            </optgroup>
                            <optgroup label="北京">
                              <option>海淀</option>
                              <option>朝阳</option>
                            </optgroup>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td>爱好:</td>
                    <td>
                        <input type="checkbox" name="hobby" value="玩" checked="checked"/><input type="checkbox" name="hobby" value="吃"/></td>
                </tr>
                
                <tr>
                    <td>头像:</td>
                    <td><input type="file" name="head"/></td>
                </tr>
                <tr>
                    <td>
                        <input type="image" src="img/捕获.PNG" value="提交" />
                    </td>
                    <td>
                        <input type="reset" value="重置" />
                        <input type="button" value="点我" />
                    </td>
                </tr>
                <tr>
                    <td>服务条款:</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <textarea readonly="readonly" style="width: 200px; height: 120px;">这是服务条款;这是服务条款;
                            这是服务条款;这是服务条款;这是服务条款;这是服务条款。</textarea>
                    </td>
                </tr>
            </table>
        </form>
      </fieldset>

 

 

 

 

3.1  两个重要属性action和method

 

action 表单提交的地址,不填的话默认为自身页面。


method 表单提交的方式:有get和post。

a.get通过URL地址栏传参、不安全、所有信息可在地址栏看到、传递数据量有限。
   http://服务器地址?name1=value1&name2=value2;(?表示传递参数,?后面采用name=value的形式传递,多个参数之间用&隔开)
b.post通过后台传参、安全、传递数据量没有限制。
   使用http请求传递数据,URL地址栏不可见。多使用post传递数据。

 

3.2  input标签及属性

 

a.type:表示input输入框的类型,可选值有:

text 文本; password 密码,输入内容时显示小黑点;
radio 单选框(同一组name必须相同,value不能省,凭借name属性区分是否为同一组,同组只能选一个); checkbox 复选框;
file 文件上传; bottom 按钮,没有功能;image 图片提交按钮,功能同submit,可以提交数据;
submit 提交表单数据;reset 重置按钮,将表单数据重置为初始状态。

 

b.name:input输入框的别名,一般情况下必填。因为传递数据时使用name=value的形式传递。


c.value:input输入框的默认值。


d.placeholder:input的提示内容,当输入框有value时,提示内容消失。


3.3  input特殊属性值


a.checked="checked" 默认选中(radio只能选一个,checkbox可以选多个。)


b.disabled=“disabled” 不能被选中,用在按钮上不能点击,用在输入框上不能修改


c.hidden=“hidden” 隐藏,等同于<input type="hidden"/>,常用于配合disabled,使用隐藏域传递数据。


3.4下拉选择控件select:


a.写法:<select>
              <option></option> (可以有多个)
           </select>


b.属性:name属性写在<select>上。

multiple="multiple":设置select为多选,一般不用


c.option常用属性:

value:有value时,name=value;没有时,name=option里边包含的值。
title:鼠标指上后显示的文字。
selected="selected",默认选中。


d.doptgroup lable=“”:用于对option标签进行分组,lable为分组名


3.5文本域textarea


a.写法:<tr>
               <td colspan="2">
                   <textarea></textarea>
               </td>
           </tr>


b.属性:style=“resize:none;” 设置为宽高不允许修改。
readonly=“readonly” 设置为只读模式,不允许编辑。
style="width: 180px; height: 250px;”设置宽高。
style=“overflow:;”设置当文字超出区域时,如何处理:
hidden:超出区域的文字,隐藏无法显示
scroll:无论多少文字,均会显示滚动
auto:自动,根据文字多少自动决定是否显示滚动。


3.6边框和标题

<fieldset>  这是表单边框
     <legend>联系方式</legend>  这是表单标题
</fieldset>


3.7  HTML5智能表单

作用:用于指向特定的form表单的id,实现input无需放在form标签之中,即可通过表单进行提交。


<form id=foo>
    ......
</form>

<input...form="foo">


3.8  input元素的新增属性:

Autocomplete:自动完成功能 记录用户之前输入的内容,并在下次输入时自动提示完成输入,
                      属性值只有on和off两种,可以在form上使用完成对整张表单的操作,也可以在input上使用。
Autofocus:自动获得焦点 只能设置input元素自动获得焦点。
Form:所属表单 通过form表单的id,确定此input输入哪张表单。
Required:必填
Pattern:验证input的模式
Placeholder:提示

 

 

H5的基本结构和基本标签的内容就写到这里,更加深层次的问题请大家继续关注我的博客,接下来的时间里我会继续发出。谢谢大家的阅读。

tips:我所用的软件均是HBuilder。