HTML基础知识详解：标签、结构与常见应用-优快云博客

基础知识

HTML是超文本标记语言，主要用处是做网页，可以再网页上显示文字、图像、视频、声音等。

HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体保护所要说明的具体内容。

HTML可以编写静态网页。

基本结构：

<html>

</html>

html标签

Html中标签一般成对出现，分开始标签和结束标签。结束标签比开始标签多了一个/。

标签与标签之间可以嵌套，但前后顺序必须保持一致。

标签不区分大小写。

常见的html标签：

※

※ <head></head> ——通常用来嵌套meta、title、style等标签

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

※ <p>段落文本</p>

※ <hx>标题文本</hx> (x为1-6) ——h1标签字号最大

※ <span>文本</span> ——span标签没有语义，主要作用是为了设置单独的样式。

如<span color:blue>文本</span>

※ <header>头部标签</header> ——用来定义头部区域

※ <section>区域</section> ——用来定义一个区域

※ <footer>底部标签</footer> ——用来定义底部区域

※ <aside>侧边栏</aside> ——用来定义侧边栏区域

※ <br> ——换行（html4.01写法）

<br /> ——换行（xhtml1.0写法）

※   ——空格

※ <hr> ——水平分割线（html4.01写法）

<hr /> ——水平分割线（xhtml1.0写法）

注：现在一般使用 xhtml1.0 的版本的标签，这种版本比较规范

※ 无序列表——ul、li

<ul>

</ul>

※ 有序列表——ol、li

<ol>

</ol>

※ 图片——img

<img src="图片地址" alt="图片不可见时，显示的替换文本" title = "图片可见时，鼠标滑过图片时显示的提示文本">

※ 超链接——href

<a href="目标网址" title="鼠标滑过时显示的文本" target=”打开网页的方式”> 链接显示的文本 </a>

Target可选值：_self（在当前页面打开链接）和_blank（在新窗口打开链接），默认为_self

※ 表格——table

创建表格的四个元素：table、tr、th、td（均为双标签）

table用来定义整个表格，table标签可以放caption（定义表格的标题）和tr（表格的行）标签

tr标签只能放th（设置标题，加粗居中显示）和td标签（表示表格的列），一组tr标签代表一行

例如：

<html>
<head>
    <meta charset="UTF-8">
    <title>学习表格标签</title>
</head>
<body>
    <table border=1px>
        <caption>前端三剑客</caption>
        <tr>
            <th>知识点</th>
            <th>重要程度</th>
            <th>难度</th>
            <th>学习周期</th>
        </tr>
        <tr>
            <td>html</td>
            <td>5星</td>
            <td>3星</td>
            <td>7天</td>
        </tr>
        <tr>
            <td>css</td>
            <td>5星</td>
            <td>4星</td>
            <td>10天</td>
        </tr>
        <tr>
            <td>js</td>
            <td>5星</td>
            <td>5星</td>
            <td>20天</td>
        </tr>
    </table>
</body>
</html>

结果：

定义表格的三个区域：thead、tbody、tfoot（均为双标签，与tr、th、td结合使用）

<thead>用于定义表格头部

<tbody>用于定义表格的内容

<tfoot>用于定义表格的底部

注：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用thead、tbody、tfoot标签</title>
</head>
<body>
    <table border=1px>
        <thead>
            <tr>
               <th>科目</th>
               <th>分数</th>
            </tr>
        </thead>  
        <tbody>
            <tr>
                <td>语文</td>
                <td>99</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>60</td>
            </tr>
        </tbody> 
        <tfoot>
            <tr>
                <td>总分</td>
                <td>159</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

结果：

※ 表单——form

form表单是可以把浏览器输入的数据传送到服务器端，这样服务器端的程序就可以处理表单传过来的数据。

<form action="服务器文件" method="传送方式" ></form>

action：浏览者输入的数据被传送到的地方

method：数据的传送方式（post/get）

表单控件：text（文本输入框）、password（密码输入框）、number（数字输入框）、url（网址输入框）、email（邮箱输入框）、radio（单选框）、checkbox（复选框）、submit（提交）、reset（重置）

<input type="text / password / number / url / email / radio / checkbox " name="名称" value="文本" />

name：文本框命名，便于后台程序调用

value：文本框设置的默认值（一般起提示作用）

placeholder：输入框占位符，用来放提示信息。在value为空时才会显示，但他不是value，也不会被表单提交

number：数字输入框，只能输入数字

url：网址输入框, 需以http://或者https://开头，且后面必须有内容

email：邮箱输入框，需包含@，且@之后必须有内容

textarea：文本输入域，格式：<textarea rows="行数" cols="列数"> 文本 </textarea>

lable：laber标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<label for="控件id名称"></label>

例如：

<label for="pass">请输入密码</label>

<input type= "password" id="pass" placeholder="Enter password">

radio：单选框

checkbox：复选框

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

checked：当设置 checked="checked" 时，该选项被默认选中

同一组的单选按钮，name 取值一定要一致，才能保证单选

例如：

   <form action="save.php" method="post">
        <label>性别:</label>
        <label>男</label>
        <input type="radio" value="1" name="gender" />
        <label>女</label>
        <input type="radio" value="2" name="gender" />
    </form>

结果：

select、option：下拉菜单

select标签里面只能放option标签，表示下拉列表的选项。

option标签放选项内容，不放置其他标签。

设置selected="selected"属性，则该选项就被默认选中。

例如：

    <form>
        <select>
            <option value="看书">看书</option>
            <option value="旅游" selected="selected">旅游</option>
            <option value="运动">运动</option>
            <option value="购物">购物</option>
        </select>
    </form>