HTML基本标签
标题标签及水平线:
标题标签
<h1></h1>~<h6></h6>标签在HTML页面中创建标题,标题默认加粗,换行。
水平线
在 HTML 页面中创建一条水平分隔线,用于定义内容中的主题变化。
- size属性:水平线的高度,单位像素
- noshade属性:没有阴影,取值:noshade,表示显示纯色
<!--水平线-->
<hr />
<hr size="5"/>
<hr noshade="noshade" />
字体标签 用于设置字体尺寸、字体颜色等。
- size属性:设置字体的大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3。
- color属性:设置字体的颜色
- 颜色的取值:#xxxxxx 或 colorname
- #xxxxxx 表示使用红绿蓝三原色设置颜色。
- 红绿蓝分别取值:00 – FF,此处使用16进制。(FF就是十进制的255)
- #000000 表示黑色,#FFFFFF白色
- #FF0000红色,#00FF00绿色,#0000FF蓝色
- 红绿蓝2位取值相同可以省略成1位。例如:#112233 简化成#123
- colorname 使用英文单词确定颜色。red 红色,blue 蓝色,green绿色
<!--字体-->
<font size="7">我个大</font>
<font color="#FF0000">我很红</font>
<font color="blue">我是蓝色的</font>
格式化标签
<!-- 格式化-->
<b>粗体</b>
<i>斜体</i>
段落标签
<!-- 段落标签 -->
<p>
噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。<br/>
问君西游何时还?畏途巉岩不可攀。但见悲鸟号古木,雄飞雌从绕林间。又闻子规啼夜月,愁空山。蜀道之难,难于上青天,使人听此凋朱颜!连峰去天不盈尺,枯松倒挂倚绝壁。飞湍瀑流争喧豗,砯崖转石万壑雷。其险也如此,嗟尔远道之人胡为乎来哉!
剑阁峥嵘而崔嵬,一夫当关,万夫莫开。所守或匪亲,化为狼与豺。朝避猛虎,夕避长蛇;磨牙吮血,杀人如麻。锦城虽云乐,不如早还家。蜀道之难,难于上青天,侧身西望长咨嗟!
</p>
图片标签 在html页面中引用一张图片
- src :指定需要显示图片的URL(路径)。
- alt :图片无法显示时的替代文本。
- width :设置图像的宽度。
- height :定义图像的高度。
<!--显示图片“registImg.jpg”-->
<img src="#" alt="蜀道之难" width="200px" height="200px" title="鼠标移上显示"/>
<img src="#" alt="难于上青天" width="200px" height="200px" title="鼠标移上显示"/>
列表标签
ol有序列表。
- type 列表类型,取值:A、a 、I 、i 、1 等
ul无序列表。
- type 符号的类型,取值:disc 实心圆、square 方块 、circle 空心圆
li列表项。
是有序列表 或无序列表 的子标签
<!--列表标签-->
<ul type="circle"> <!--以“空心圆”显示无序列表-->
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul>
<ol type="I"> <!--以大写阿拉伯数字显示序号-->
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
超链接标签
是在html页面提供一种可以访问其他位置的实现方式。
- href:用于确定需要显示页面的路径(URL)
- target:确定以何种方式打开href所设置的页面。常用取值:blank、self 等
- _blank 在新窗口中打开href确定的页面。
- _self 默认。使用href确定的页面替换当前页面。
<!--超链接-->
<a href="http://www.baidu.com" target="_self">
访问“百度”官网,以默认方式打开
</a><br />
<a href="http://www.taobao.com" target="_blank">
访问“淘宝”官网,以新窗口方式打开
</a><br />
表格标签
HTML表格由table标签以及一个或多个tr、th或td标签组成。
- table 是父标签,相当于整个表格的容器。
- border 表格边框的宽度。
- width 表格的宽度。
- cellpadding 单元边沿与其内容之间的空白。
- cellspacing 单元格之间的空白。
- bgcolor 表格的背景颜色。
- tr标签用于定义行
- td标签用于定义表格的单元格(一个列)
- colspan 单元格可横跨的列数。
- rowspan 单元格可横跨的行数。
- align 单元格内容的水平对齐方式, 取值:left 左 、right 右、center 居中。
- nowrap 单元格中的内容是否折行。
- th标签用于定义表头。单元格内的内容默认居中、加粗。
编写3*3表格,使用修饰表头
<!--3*3表格,设置宽度和边线,并显示1像素的边线-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<th>1标题</th>
<th>2标题</th>
<th>3标题</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
编写3*3表格,将第一行全部合并
<!--3*3表格,将第一行全部合并-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#ddd">a</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
编写3*3表格,将第一列全部合并
<!--3*3表格,将第一列全部合并-->
<table border="1" width="400px" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3" bgcolor="#ddd">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
表单相关标签
form>表单标签,在html页面创建一个表单,表单标签在浏览器上没有任何显示。如果数据需要提交到服务器,负责搜集数据的标签必须存放在表单标签体内容。
- action属性:请求路径,确定表单提交到服务器的地址(路径)
- method属性:请求方式。常用的取值:GET、POST
- GET:默认值
- 提交的数据追加在请求路径上。例如:/1.html?username=jack&password=1234,数据格式k/v,追加是使用?连接,之后每一对数据使用&连接
- 因为请求路径长度有限,所有GET请求提交的数据有限。 - 敏感数据会在地址栏显示,不适合做密码等数据提交
- POST: - 提交的数据不再请求路径上追加(及不显示在地址栏上)
- 提交的数据大小不显示 ``` ```
输入域标签
input 标签用于获得用户输入信息,type属性值不同,搜集方式不同。最常用的标签。
- type属性
- text:文本框,单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符
- password:密码框,密码字段。该字段中的字符以黑圆显示。
- radio:单选框,表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的
- submit:提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性,否则将“提交”两个字提交到服务器。
因为不同项目注册需要的字段不同,需要完成的案例中没有覆盖所有的表单元素,以下标签使用也需要大家掌握。 - checkbox: 复选框
- image: 按钮上的图片
- file:文件上传组件,提供"浏览"按下可以选择需要上传文件.
- hidden:隐藏字段. 数据会发送给服务器,但浏览器不进行显示。
- reset:重置按钮。将表单恢复到默认值。
- button:普通按钮,常用于与JavaScript结合使用。
- name:元素名,如果需要表单数据提交到服务器,必须提供name属性值,服务器通过属性值获得提交的数据。
- value属性:设置input标签的默认值。submit和reset为按钮显示数据
- checked属性:单选框或复选框被选中。
- readonly:是否只读
- disabled:是否可用
下拉列表标签
select>下拉列表。可以进行单选或多选。需要使用子标签指定列表项
- name属性:发送给服务器的名称
- multiple属性:不写默认单选,取值为“multiple”表示多选。
- size属性:多选时,可见选项的数目。
- 子标签:下拉列表中的一个选项(一个条目)。 - selected :勾选当前列表项 - value :发送给服务器的选项值。
文本域标签
textarea文本域。多行的文本输入控件。
- cols属性:文本域的列数
- rows属性:文本域的行数