HTML基础_基本标签的学习

2023-11-22 21:23:31

一、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>
 <a>链接标签a>

<a href="http://www.baidu.com">这是一个链接a>

<a href="//www.baidu.com" target="_blank">会在新页面打开百度a>
<img src="w3cnote://file/getImage?fileId=logonew2png" width="206" height="36" alt="替换文本"><em>斜体标签em>
<strong>加粗标签strong>
br>
hr>

1.5 表格标签

1.5.1 标签介绍

…

：定义表格

…：定义表格的标题栏（文字加粗）
…：定义表格的行

…：定义表格的列


<table border="1"><tr><td>row 1, cell 1td><td>row 1, cell 2td>tr><tr><td>row 2, cell 1td><td>row 2, cell 2td>tr>
table>

在浏览器显示效果：

1.5.2 属性介绍

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

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

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

bordercolor: 可以设置边框颜色。

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

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

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

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


<tr><th>Column 1th><th>Column 2th><th>Column 3th>tr><tr>- 创建单独的表头。
- 表示表格的主体。
- 创建一个单独的表页脚。但值得注意的是
和标签应出现在之前
HTML表格的嵌套
您可以在另一个表中使用一个表。可以使用
Row 1 Cell 1td><td>Row 1 Cell 2td><td>Row 1 Cell 3td>tr><tr><td>Row 2 Cell 2td><td>Row 2 Cell 3td>tr><tr> Row 3 Cell 1td>tr>
table>
 
网页效果： 
 
 
HTML表格头部、主体、页脚 
 
 
 
 
内的几乎所有标签。
1.6 列表标签
1.6.1 无序列表u
无序列表使用 
 标签
 标签的type值可设置为：disc，square，circle 
<ul><li>Coffeeli><li>Milkli>
ul> 
 
显示效果 
 
1.6.2 有序标签 
有序列表始于 
标签。每个列表项始于 标签。
 标签的type值可设置为：1，A，a，I，i 
<ol><li>Coffeeli><li>Milkli>
ol> 
 
显示效果 
 
1.6.3 自定义列表 
自定义列表以 
 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
 开始 
 <dl><dt>Coffeedt><dd>- black hot drinkdd><dt>Milkdt><dd>- white cold drinkdd>dl> 
 
显示效果 
 
1.7 表单标签 
表单是一个包含表单元素的区域,表单使用表单标签 来设置: 
<form>
.
input elements
.
form>
 
1.7.1 输入元素 
 元素是最重要的表单元素。 
 
文本域 
文本域通过 标签来设定 
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">
form> 
 
显示效果： 
 
 
密码字段 
密码字段通过标签 来定义: 
<form>
Password: <input type="password" name="pwd">
form> 
 
显示效果如下： 
 
 
单选按钮（Radio Buttons） 
标签定义了表单单选框选项。 
定义在相同name属性的为一组，一组只可以选择一个，value属性设定的是单选按钮的值，即对应显示的文本 
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
form> 
 
显示效果如下： 
 
 
复选框（Checkboxes） 
 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 
同上，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) 
定义了提交按钮. 
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
form> 
 
显示效果如下：