Html学习2_常用标签

Html学习2_常用标签

基础标签

h标签（标题标签）

<hn>   标题文本   </hn>

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

p标签（段落标签）

<p>  文本内容  </p>

注意：文本在一个段落中会根据浏览器窗口的大小自动换行。

h标签（水平线标签）

<hr />是单标签

注意：常用在一些段落与段落之间隔开，使得文档结构清晰，层次分明。

br标签（换行标签）

<br />

注意：文本强制换行显示

div、span标签（区块标签）

<div> 这是头部 </div>    <span>今日价格</span>

注意： 他们是没有语义的 是我们网页布局主要的2个盒子 css+div

区别：

div占用的位置是一行

span占用的是内容有多宽就占用多宽的空间距离

img标签（图片标签）

<img src="图像URL" />

属性

src	图像路径
alt	图像不显示时的替换文本
title	鼠标悬停显示内容
width	图像宽度（不支持百分比%）
height	图像高度（不支持百分比%）
border	图像边框宽度

a标签（链接标签）

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

 

文本格式化标签

<b>	文字粗体显示
<i>/<e>	文字倾斜
<s>/<del>	文字加删除线
<u>/<ins>	文字加下划线

列表标签

ul：无序标签 ol：有序标签

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
​
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表：dl dt dd

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

ol	定义有序列表
ul	定义无序列表
Li	定义列表项
dl	定义列表
dt	自定义列表项目
dd	定义自定列表项的描述

 

表格标签

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

1.table用于定义一个表格。 2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。 3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

常用属性

border	表格边框	像素（0表示无边框）
cellspacing	单元格与单元格边框之间的把空白间距	像素（默认2）
cellpadding	单元格内容与边框之间的空白距离	像素（默认1）
width	表格宽度	像素
height	表格高度	像素
align	表格对齐方式	left、center、right

合并单元格属性

跨行合并：rowspan 跨列合并：colspan

注意：合并的顺序 先上 先左

表单

input标签属性

​

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图片选择按钮
	file	文件域
name	用户自定义	控件名称
value	用户自定义	input空间中的默认文本
size	正整数	input控件在页面中的显示宽度
checked	checked	定义默认被选中项
maxlength	正整数	允许输入最多字符数

​

label标签

<label for="male">Male</label>  // for 属性规定 label 与哪个表单元素绑定
<input type="radio" name="sex" id="male" value="male">

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

textarea标签

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

输入大量的信息的控件。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

1. Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

2. method 用于设置表单数据的提交方式，其取值为get或post。

3. name 用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。