HTML基础_基本标签的学习

一、HTML基础

1.1 基本网页编码格式

• Iso-8859-1 ：（默认）英文编码格式

• GBK(7000多个中文),gb2312(20000多个中文) ：中文编码格式

• utf-8，utf-16 ：国际标准编码格式

1.2 解决乱码的方法

1.3 meta 标签

<!--设置网页的编码格式-->
<meta http-quiv="Content-Type" content="text/html:charset=utf-8">
<!--    设置关键词，提供给搜索引擎使用-->
<meta name="keywords" content="java,css,js">
<!--    描述描述网页信息-->
<meta name="description" content="待到山花烂漫时">
<!--    网页自动刷新-->
<meta http-equiv="refresh" content="5;http://www.baidu.com">

1.4 基本标签

<h1>一级标题</h1>
<h2>二级标题</h2>

<p>段落标签</p>
<pre>预格式文本标签</pre>

<!--空格标记-->
&nbsp;

<a>链接标签</a>
<!--href 属性描述了链接的目标。-->
<a href="http://www.baidu.com">这是一个链接</a>
<!--使用 Target 属性，你可以定义被链接的文档在新的窗口打开-->
<a href="//www.baidu.com" target="_blank">会在新页面打开百度</a>

<!--图片标签,width设置宽度，height设置长度，alt在图片未加载时会显示alt中的文字-->
<img src="w3cnote://file/getImage?fileId=logonew2png" width="206" height="36" alt="替换文本">

<em>斜体标签</em>
<strong>加粗标签</strong>

<!--换行标签-->
</br>

<!--分隔符标签-->
</hr>

1.5 表格标签

1.5.1 标签介绍

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

<!--表格实例-->
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示效果：

1.5.2 属性介绍

border: 为表格设置边框，其后的数字代表边框像素

width与height: 设置表格宽度和高度,可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

bgcolor: 可以为整个表格或仅为一个单元格设置背景颜色。

bordercolor: 可以设置边框颜色。

cellspacing 定义表格单元格之间的空间

cellpadding 表示单元格边框与单元格内容之间的距离

---

colspan 将两个或多个列合并为一个列

rowspan 如果要合并两行或更多行

<!--代码示例-->
<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>

网页效果：

---

HTML表格头部、主体、页脚

• <thead>- 创建单独的表头。
• <tbody>- 表示表格的主体。
• <tfoot>- 创建一个单独的表页脚。

但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前

---

HTML表格的嵌套

您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

1.6 列表标签

1.6.1 无序列表u

无序列表使用 <ul> 标签
<ul>标签的type值可设置为：disc，square，circle

<ul>
 <li>Coffee</li>
 <li>Milk</li>
</ul> 

显示效果

1.6.2 有序标签

有序列表始于 <ol>标签。每个列表项始于 <li>标签。
<ol>标签的type值可设置为：1，A，a，I，i

<ol>
 <li>Coffee</li>
 <li>Milk</li>
</ol> 

显示效果

1.6.3 自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd> 开始

 <dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
 </dl> 

显示效果

1.7 表单标签

表单是一个包含表单元素的区域,表单使用表单标签 <form>来设置:

<form>
.
input elements
.
</form>

1.7.1 输入元素

<input> 元素是最重要的表单元素。

---

文本域

文本域通过<input type="text"> 标签来设定

<form>
	First name: <input type="text" name="firstname"><br>
	Last name: <input type="text" name="lastname">
</form> 

显示效果：

---

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form> 

显示效果如下：

---

单选按钮（Radio Buttons）

<input type="radio">标签定义了表单单选框选项。

定义在相同name属性的为一组，一组只可以选择一个，value属性设定的是单选按钮的值，即对应显示的文本

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 

显示效果如下：

---

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

同上，name属性相同的为一组，value为其值

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form> 

显示效果如下：

---

提交按钮(Submit Button)

<input type="submit">定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

显示效果如下：

---

<button>标签

<button> 标签用来设置 HTML 中的按钮。

<button type="button">点击按钮</button>

显示效果：

---

1.7.2 <select>标签

<select> 元素用来创建下拉列表。

<select> 元素中的 <option>标签定义了列表中的可用选项。

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

效果如下

---

1.7.3 <label> 标签

<label> 标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male">
</form>

效果如下：

---

1.7.4 <textarea> 标签

<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本

rows与cols控制其长宽

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

显示效果：