阿里云

文本标签「程序员培养之路第二天」

第一节、文本标签

段落标签 <p></p>

段落标签用来描述一段文字

标题标签 <hx></hx>

• 标题标签用来描述一个标题

• 标题标签总共有六个级别,由高到低分别是h1,h2,h3,h4,h5,h6

<h1>我是一级标题</h1>

<h2>我是二级标题</h2>

<h3>我是三级标题</h3>

<h4>我是四级标题</h4>

<h5>我是五级标题</h5>

<h6>我是六级标题</h6>

• <h1></h1>标签在每个页面中通常只出现一次

强调语句标签<em></em>

用于强调某些文字的重要性

更加强调标签<strong></strong>

和 <em>标签一样,用于强调文本,但它强调的程度更强一些

无语义标签<span></span>

<span>标签是没有语义。

短文本引用标签<q></q>

简短文字的引用。

长文本引用标签<blockquote></blockquote>

定义长的文本引用

换行标签<br/>

<br/>标签作用相当于word文档中的回车,起到文字换行的作用

第二节 多媒体标签

链接标签 <a></a>

图片标签 <img/>

视频标签<video></video>

• <video src="mov.mp4" controls="controls">

• 目前video支持三种视频格式

– Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

– MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

– WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

音频标签<audio></audio>

<audio src="a01.mp3"></audio>


第三节 列表

无序列表标签<ul><li><li/></ul>

• ul-li是没有前后顺序的信息列表

• <ul><ul/>列表定义一个无序列表

• <li><li/>代表无需列表中的每一个元素

<ul>

  <li>HTML<li/>

  <li>CSS<li/>

  <li>JavaScript<li/>

</ul>

有序列表<ol><li><li/></ol>

ol-li列表默认情况下,每个li在浏览器中都会显示一个数字,代表自己的序号

定义列表<dl></dl>

• 定义列表通常和<dt></dt>和<dd></dd>标签一起使用

• <dt></dt>定义列表中的项目

• <dd></dd>描述列表中的项目

<dl>

  <dt>学习WEB前段需要掌握哪三种语言</dt>

  <dd>需要掌握HTML,搭建网页结构</dd>

  <dd>需要掌握CSS,用于修改网页结构的样式</dd>

  <dd>需要掌握JavaScript,用于用户和计算机交互</dd>

</dl>


第四节、表格

表格标签<table></table>

表格的一行<tr></tr>

有几对tr, 表格就有几行。

表格的表头<th></th>

表格的头部的一个单元格,表格表头。

单元格<td></td>

• 表格的一个单元格,一行中包含几对<td><td/>,说明一行中就有几列。

<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>小花</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>28</td>
</tr>
</table>

表格合并

• 同一行内,合并几列colspan=“2”

• 同一列内,合并几行rowspan="3"

第五节、表单标签系列

表单标签<form>

• <form></form>表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

• <form method="传送方式" action="服务器文件">

• action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)

• method : 数据传送的方式(get/post)

输入标签<input/>

input是最重要的表单标签,重要属性包括:

• name:为文本框命名,用于提交表单,后台接收数据用。

• value:为文本输入框设置默认值。(一般起到提示作用)

• type:通过定义不同的type类型,input的功能有所不同(见下表)

type 功能说明

text 单行文本输入框

password 密码输入框(密码显示为***)

radio 单选框 (checked属性用于显示选中状态)

checkbox 复选框(checked属性用于显示选中状态)

file 上传文件

button 普通按钮

reset 重置按钮(点击按钮,会触发form表单的reset事件)

submit 提交按钮(点击按钮,会吃饭form表单的submit事件)

email 专门用于输入 e-mail

url 专门用于输入 url

number 专门用于number

range 显示为滑动条,用于输入一定范围内的值

date 选取日期和时间(还包含:month、week、time、datetime、datetime-local)

color 选取颜色

<button>按钮

button标签的功能与<input>按钮功能相同,button是双标签,内部可以嵌套其他行内元素。

下拉选择框<select></select>

<select>   
    <option value="看书">看书</option>      
    <option value="旅游" selected="selected">旅游</option>    
    <option value="运动">运动</option>     
    <option value="购物">购物</option>   
</select>

• <option value="提交值">选项</option>是下拉选择框里面的每一个选项

• selected:当某个option选项有这个属性时候,select默认选中这个选项

文本域 <textarea></textarea>

• 当用户想输入大量文字的时候,使用文本域

• cols :多行输入域的列数。

• rows :多行输入域的行数

第六节、其他语义化标签

盒子<div></div>

• 俗称为盒子,division(分割)

• 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

• 什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。

网页头部<header></header> 

• HTML5新增语义化标签,定义网页的头部

• 主要用于布局,分割页面的结构

底部信息<footer></footer> 

• HTML5新增语义化标签,定义网页的底部

• 主要用于布局,分割页面的结构

导航<nav></nav>

• HTML5新增语义化标签,定义一个导航

• 主要用于布局,分割页面的结构

文章<article></article>

• HTML5新增语义化标签,定义一篇文章

• 主要用于布局,分割页面的结构

侧边栏<aside></aside>

• 语义化标签,定义主题内容外的信息

• 主要用于布局,分割页面的结构

时间标签<time></time>

• 语义化标签,定义一个时间

喜欢就点个赞吧