黑马程序员技术交流社区
标题:
常用内联元素标签
[打印本页]
作者:
晴天小雨
时间:
2018-9-19 17:46
标题:
常用内联元素标签
本帖最后由 晴天小雨 于 2018-9-19 17:50 编辑
常用内联元素标签
1、超链接标签 链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线
<a href="02.html">
第二个网页
</a>
<a href="http://www.baidu.com">
百度网
</a>
<a href="http://www.baidu.com">
<img src="images/logo.png" alt="logo">
</a>
<a href="#">
默认链接
</a>
2、通用内联容器标签 具有内联元素基本特性，没有其他默认样式
<p>
这是一个段落文字，段落文字中有
<span>
特殊标志或样式
</span>
的文字
</p>
3、图片标签（行内块元素） 在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。
<img src="images/pic.jpg" alt="图片" />
4、视频标签
<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
5、音频标签
<audio src="/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
6、地址标签
<address>
Written by
<a href="mailto:webmaster@example.com">
Donald Duck
</a>
.
<br>
Visit us at:
<br>
Example.com
<br>
Box 564, Disneyland
<br>
USA
</address>
列表标签
列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的.
无序列表
<ul>
<li>
<a href="#">
列表标题一
</a>
</li>
<li>
<a href="#">
列表标题二
</a>
</li>
<li>
<a href="#">
列表标题三
</a>
</li>
</ul>
有序列表
<ol>
<li>
<a href="#">
Coffee
</a>
</li>
<li>
<a href="#">
Milk
</a>
</li>
</ol>
定义列表
<dl>
<dt>
<a href="#">
Coffee
</a>
</dt>
<dd>
<a href="#">
Black hot drink
</a>
</dd>
<dt>
<a href="#">
Milk
</a>
</dt>
<dd>
<a href="#">
White cold drink
</a>
</dd>
</dl>
列表样式设置
通用设置：
list-style
去掉列表项的小圆点或数字，比如：
list-style:none
有序列表样式： 默认 数字列表 <
ol
type=
"A"
> 字母列表 <
ol
type=
"a"
> 小写字母列表 <
ol
type=
"I"
> 罗马字母列表 <
ol
type=
"i"
> 小写罗马字母列表 无序列表样式： 默认 圆点 <
ul
type=
"disc"
> 圆点 <
ul
type=
"circle"
> 圆圈 <
ul
type=
"square"
> 方点
表单标签
表单用于搜集不同类型的用户输入
<form>标签
定义整体的表单区域
form 属性action 规定向何处提交表单的地址（URL）（提交页面）method 规定在提交表单时所用的 HTTP 方法（默认：GET）accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）autocomplete 规定浏览器应该自动完成表单（默认：开启）enctype 规定被提交数据的编码（默认：url-encoded）name 规定识别表单的名称（对于 DOM 使用：document.forms.name）novalidate 规定浏览器不验证表单target 规定 action 属性中地址的目标（默认：_self）示例： <form action=
"action_page.php"
//提交的服务器地址 method=
"GET"
//提交的HTTP方法 target=
"_blank"
accept-charset=
"UTF-8"
ectype=
"application/x-www-form-urlencoded"
autocomplete=
"off"
novalidate> ... </form>
<label>标签
为表单元素定义文字标注
<label>
账户：
</label>
<input type='text'>
</input>
<input>标签
定义通用的表单元素
type属性 type=
"text"
定义单行文本输入框 type=
"password"
定义密码输入框 type=
"radio"
定义单选框 type=
"checkbox"
定义复选框 type=
"file"
定义上传文件 type=
"submit"
定义提交按钮 type=
"reset"
定义重置按钮 type=
"button"
定义一个普通按钮 value属性 定义表单元素的值 name属性 定义表单元素的名称，此名称是提交数据时的键名
<textarea>标签
定义多行文本输入框
<textarea name=
"message"
rows
=
"10"
cols
=
"30"
> The cat was playing in the garden.</textarea>
rows
:设置行数
cols
:设置列数
<select>标签和<option>标签
定义下拉表单元素
<select name=
"cars"
> <option value=
"volvo"
>Volvo</option> <option value=
"saab"
>Saab</option> <option value=
"fiat"
>Fiat</option> <option value=
"audi"
>Audi</option></select>
<fieldset>标签和<legend>标签
<fieldset>标签组合表单中的相关数据
<legend>标签为 <fieldset> 元素定义标题
<form action="action_page.php">
<fieldset>
<legend>
Personal information:
</legend>
First name:
<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:
<br>
<input type="text" name="lastname" value="Mouse">
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
效果：firstname=Mickey&lastname=Mouse
注册表单实例
<form action="http://www..." method="get">
<p>
<label>
姓名：
</label>
<input type="text" name="username" />
</p>
<p>
<label>
密码：
</label>
<input type="password" name="password" />
</p>
<p>
<label>
性别：
</label>
<input type="radio" name="gender" value="0" />
男
<input type="radio" name="gender" value="1" />
女
</p>
<p>
<label>
爱好：
</label>
<input type="checkbox" name="like" value="sing" />
唱歌
<input type="checkbox" name="like" value="run" />
跑步
<input type="checkbox" name="like" value="swiming" />
游泳
</p>
<p>
<label>
照片：
</label>
<input type="file" name="person_pic">
</p>
<p>
<label>
个人描述：
</label>
<textarea name="about">
</textarea>
</p>
<p>
<label>
籍贯：
</label>
<select name="site">
<option value="0">
北京
</option>
<option value="1">
上海
</option>
<option value="2">
广州
</option>
<option value="3">
深圳
</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有,比如：outline:none;placeholder 设置input输入框的默认提示文字。
表格标签
表格元素及相关样式
表格标签
<table>
定义表格 border 边框大小 cellpadding 单元格边距 cellspacing 单元格间距 bgcolor 设置表格背景颜色，可也用于单元格 background 设置表格背景,可也用于单元格 frame 设置表格样式 box above below hsides vsides
<caption>
定义表格标题
<th>
定义表格的表头 colspan 跨列属性 rowspan 跨行属性
<tr>
定义表格的行
<td>
定义表格单元
<thead>
定义表格的页眉
<tbody>
定义表格的主体
<tfoot>
定义表格的页脚
<col>
定义用于表格列的属性
<colgroup>
定义表格列的组
设置表格样式
border
-
collapse
设置表格的边线合并，如：
border
-
collapse
:
collapse
;
表格示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style type="text/css">
td,th {
border-bottom
:
1px
dashed
#0181CC
;
text-align
: center; }
</style>
</head>
<body>
<table border="0" cellspacing="1px" cellpadding="5px" bgcolor="#C4E3F3" align="center">
<!--表格标题 -->
<caption>
table test
</caption>
<!--题头 -->
<thead>
<tr>
<!--表格表头 -->
<th>
id
</th>
<!--单元格跨2列-->
<th colspan="2">
name
</th>
<th>
age
</th>
</tr>
</thead>
<!--正文 -->
<tbody>
<tr>
<!--表格行数据-->
<td>
1
</td>
<td colspan="2">
Tom
</td>
<td>
18
</td>
</tr>
<tr>
<td>
2
</td>
<td colspan="2">
Jack
</td>
<td>
21
</td>
</tr>
</tbody>
<!--脚注 -->
<tfoot>
<tr>
<td>
</td>
<td colspan="2">
Sum
</td>
<td>
$180
</td>
</tr>
</tfoot>
</table>
</body>
</html>
附加说明： 当然没有必要全都用到，但是必须记住的是如果有thead或tfoot,就必须要tbody。 加了tbody后准确来说并不影响下载速度，而是呈现速度。 浏览器对Table的解释是等待整个table全部加载完才显示。如果加入tbody，浏览器则一边下载一边显示已经下载的内容。
作者:
奋斗的路上
时间:
2018-9-22 17:37
原来做好的笔记，然后发出来都会乱码，建议黑马帖子编辑器增加 markdown功能
作者:
jiayou$$
时间:
2018-9-22 17:52
同意楼上的说法
作者:
yerik16
时间:
2018-9-25 10:16
增加 markdown功能可以让笔记看着更美观
作者:
赖丽霖老师
时间:
2018-9-26 19:07
加油哦 加油
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
