HTML标签

最新推荐文章于 2023-04-28 07:17:26 发布

xycy123_com

最新推荐文章于 2023-04-28 07:17:26 发布

阅读量150

点赞数

文章标签： html html5 web css

本文链接：https://blog.csdn.net/xycy123_com/article/details/116764554

版权

列表标签

ul(unorder list)无序列表，它是声明一个列表的集合（整体），一个封装容器。ul有两个属性：
- type ：指定列表的项目符号，默认是disc实心圆可选值有circle、square
- contenteditable ：内容是否可编辑，它是H5新增的属性
li(list) 创建列表中的每项内容，每个列表项都有一个项目符号，可以通过type属性来单独设置某个列表的符号
ol(order list)有序列表，它也是声明一个列表的封装容器。ol支持三个属性：
- start：列表的起始标号
- type ：编号的类型可选值是1、a、A、i、I
- reverse ：按编号值倒序排列
dl(definition list)定义列表，它和上述列表不同的是可以给每个（列表项dt）设置（表述信息dd）
dt：声明列表项，它没有项目符号
dd：定义列表的描述，它有一个缩进

a标签

a标签在html中用作超链接以及锚点，如何区分超链接和锚点？

作为超级链接的a标签，它一定具有href的属性
只作为锚点的a标签，需要设置name或者ID名

a链接中的href用来指向一个资源地址，它有两种情况：

远程的资源文件：就是外部服务器上的文件，需要使用协议+路径的完整地址形式来书写。如果省略协议它会理解成本地的文件地址
- ```
<a href="http://www.baidu.com">百度</a>
```
本地的资源文件：本地服务器或者电脑上的文件，本地文件有两种书写形式：
- 绝对路径，也就是以协议开头的完整路径形式，一般是file://路径和http://localhost
- 相对路径，它是借助.和..来替代当前目录地址和上级目录地址。并且./在路径中可以省略
```
<a href="./foo.html">foo.html</a>
<a href="foo.html">foo.html</a>
<a href="../bar.html"></a>
```

a锚点的使用有两点要求：

锚点需要实现设定（埋伏）并且要命名（name/id）
链接要指向锚点，需要使用路径#锚点名称的形式来写

多媒体标签

img：image用于加载图片资源文件，它有以下一个属性：
- src：加载资源的地址
- width ：图片的宽度
- height ：图片的高度，高度和宽度一般不同时设定避免破坏分辨率
- alt：图片的说明信息在鼠标移上来的时候会提示。现在该属性被一个标准属性(title)替代
```
<img src="angelbaby.jpg" title="美女"/>
```
- 在H5中新增了figure标签用来关联资源文件和它的描述信息
```
<figure>
    <img src="angelbaby.jpg" title="美女"/>
	<figcaption>
    	<p> 知性、气质、圆润、青春的美女欣赏</p>
    </figcaption>
</figure>
```
audio：用来加载音频文件，它有以下几个属性
- src：设置资源地址
- controls：音频的控制面板，如果没有则看不见音频只能听到声音
- autoplay：自动播放，在FireFox中静音状态下可以自动播放，Chrom不支持
- muted：初始化设置静音
- preload：预先缓冲文件
- loop：无限循环播放
video：加载视频文件，它支持多种格式 mp4/ogg/avi/wma，常见属性有：
- src ：视频文件地址
- controls ：控制面板
- preload ：浏览器一加载就开始缓存，而不是等到用户点击播放才开始缓存
- autoplay：自动播放
- width/height ：控制视频的宽度和高度
- poster ：设置封面
embed ：加载flash文件，后缀名是.swf，主要是src属性

表格标签

表格使用table来创建，一个表格是由行(tr)和列(td)组成的，第一行是表头行(th)。比较难的是如何设计和规划一个不规则表格，需要借助单元格的属性：rowspan和colspan来合并完成。

<table cellspacing=0 cellpadding=0>
    <tr>
        <td colspan=2 rowspan=2 width=200 height=200> 第一二行 第一二列</td>
        <td colspan=2 rowspan=2 width=200 height=200> 第一二行 第三四列</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan=2 rowspan="2" width=200 height=200>第三四行 第一二列</td>
        <td width=100 height=100>第三行 第三列</td>
        <td width=100 height=100>第三行 第四列</td>
    </tr>
    <tr>
        <td width=100 height=100>第四行 第三列</td>
        <td width=100 height=100>第四行 第四列</td>
    </tr>
</table>

表单标签

表单在网站中是用来提交数据，实现数据交互也就是动态网站的功能，网站中常见功能表单有：

登陆和注册的表单
用户留言、评论、回复的表单
站内和站外的搜索框

凡是能够提供用户输入的区域都是由表单构成的。

form表单

在HTML中，form标签用来创建一个表单的集合（整体），表单中包含各式各样的输入控件：

文本输入框：输入文字信息，只有一行内容
密码输入框：输入不可见的内容
文本域输入框：能够大数据的输入，就是多行内容

除了输入控件外还有各型选框：单选、多选、下拉等。

form用法：

<form method="post/get" action="url">
   <!--各种输入控件---> 
</form>

form的属性：
- method ：本意是方法，是用来表示该表单数据提交到服务器的方式，它有两个值：get/post。通常会设置成post
- action：所有的表单都是提交给服务器，需要提供一个服务器的地址

fieldset用法：

<form method="post" action="login.php">
    <fieldset>
    	<lenged>基本信息</lenged>
        <!--基本信息的输入控件--->
    </fieldset>
    
    <fieldset>
    	<lenged>详细信息</lenged>
        <!--详细信息的输入控件--->
    </fieldset>
</form>

一个表单还可以分成多个输入区域，例如注册用户时，可以将用户信息分为：基本信息和详细信息。然后使用fieldset将它们做形式上区分

input控件

输入控件有很多中类型，但都是通过input标签来设置的，它们的type属性值不一样：

text文本框：type=“text”，主要的属性如下：
- size：控制文本框的长度
- maxlength：允许输入的最大字元（不却分汉子、字母、数字）个数
- value：用来设置初始化的值
- placeholder：提示信息，它以暗灰色呈现且不影响用户输入
- name：给输入框标记的名称，用来给服务端获取数据用的，每个输入框都必须有该属性，否则服务器无法接收到该输入框的值
password密码框：type=“password”，属性列表如下：
- name ：标记该输入框的值类型
- value：默认值，一般不设置
datalist提示框：需要在文本框中使用list属性指定一个关联的数据列表。然后该数据列表要使用ID命名

登陆名：<input type="text" name="login" list="ever">
<datalist>
	<option value="王老师" />
    <option value="刘老师" />
    <option value="黑老师" />
</datalist>

number数值：type=“number” 用户用户输入数值型的数据，它可以做选择和控制避免产生输入错误
- value：当前的默认值
- min ：最小值
- max ：最大值
date日期选框：type=“date” 能够自动生成日历供用户选择并且使用value设置默认值
- value：设置默认值，格式是：2019-08-04
color颜色面板：type=“color” 会生成一个颜色面板供选择
url地址输入：支持输入一个url，该地址必须以"https://"开头，在表单提交时会自动验证
email输入：要求内容格式为 "a@b"的宽松验证

各型选框

radio单选框：也是input标签，type类型radio。单选框是同一个选项只能只能一个结果。
- 如果确认是同一个选项是通过它们的name值。
- 单选框中使用checked来设置默认值
checkbox多选框：也是input标签，type类型checkbox ;
- 多选框的name值必须使用数组形式，也就是名字后面加[]
- 多选框中也使用checked来设置默认值
select下拉框：支持以下拉列表的形式让用户选择，每个选项通过option来设置，基本结构如下：
```
城市：
<select name="city">
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
    <option value="dg">东莞</option>
    <option value="zh">珠海</option>
    <option value="hz">惠州</option>
</select>
```
- 下拉框一般会有一个空白选项：
<option value="">-请选择-</option>
- 如果要设置默认选中项，需要在option选项加上selected属性
<option value="gz" selected></option>
- 下拉框也可多选在select上设置multiple属性，然后按住CTRL键来选择
<select name="city" multiple>
- 下拉框还支持分组，使用<optgroup label='分组名'>

textarea

文本域输入框，就是能够大量输入文本的区域，类似于网页中看到的文本编辑器。它有以下几个属性：

maxlength：显示最大字元数
cols ：显示的列宽
rows：显示的行高

附件上传

将文件最为表单附件上传需要使用<input type='file' >。如果有附件上传那么表单需要声明编码类型enctype值为multipart/form-data，其实就是以二进制数据的形式提交该表单。

几种按钮

表单中按钮有几种：普通按钮、重置按钮、提交按钮。按钮都是使用input控件，但是type值是特定的

普通按钮：type值为button。是可点击的按钮没有特定的行为需要借助于javascript实现动画效果
重置按钮：type值为reset，重置表单的按钮，清空内容
提交按钮：type值为submit，提交按钮点击会提交表单

<form method="post" action="" enctype="multipart/form-data">
        <p>
            昵称：<input type="text" name="nickname" value="" />
        </p>
        <p>
            留言：<textarea name="message" cols="30" rows="10" maxlength="10">不超过100字的评论</textarea>
        </p>
        <p>
            头像：<input type="file" name="avatar" />
        </p>
        <p>
            <input type="button" value="没有账号？注册以下">
            <input type="reset" value="重新输入">
            <input type="submit" value="立即提交">
        </p>
    </form>

容器标签

有两个特殊的标签DIV和SPAN，它们没有显示样式，也没有语义。它们用来作为容器存放内容的，多是为了在CSS中进行布局和样式设置。之所以定义两个容器它们代表块状元素和行内元素。

块级元素：无论内容大小如何它们总是占据一整行，p、hr、h1~h6、ul、ol、dl、table、form、div
行内元素：它们的宽度取决于内容的大小，行内元素没有高度 .a、b、u、i、strong、em、span

CSS简介

CSS全称是：CasecadingStyleSheet（层叠样式表），现在网页的美化都是使用CSS来实现的。它还有一个更重要的职能是使用DIV+CSS进行页面的布局和排版。

CSS入门

基本语法

css的基本语法形式如下所示：

<style>
	选择器 { 
        属性名1 ： 值1; 
        属性名2 ： 值2;
	}
</style>

说明：

1、选择器的作用是“用于选定要进行外观设定的标签（元素）”。

2、属性就是特征，就是描述性信息。就像人的特征信息有：姓名，性别，学历，年龄，身高，体重等等。

每个特征自然具有相应的特征值（数据）。属性名和数据值，构成“一对”，通常可称为“名值对”。这里的属性都是css内容好的属性样式。

<style>

p{color: red；}

h1{font-size: 22px； color: red；}


</style>

选择器

标签名选择器：直接使用标签选择元素
类选择器：通过class给一组标签添加类名，然后在css中使用.类名的形式选中这一组标签
ID选择器：通过给标签标记唯一的ID名然后在css中使用#ID来选中该元素。ID名在页面中只能出现一次
通配符选择器：选中页面中的所有元素

CSS 属性

属性就是特征，就是描述性信息。就像人的特征信息有：姓名，性别，学历，年龄，身高，体重等等。

每个特征自然具有相应的特征值（数据）。属性名和数据值，构成“一对”，通常可称为“名值对”。

css属性跟html属性对比如下：

html的属性写法： <标签名属性1=”值1” 属性2=”值2” … >

css的属性写法：选择器{ 属性1：值2；属性2：值2； … }

简单常用的css属性

color：设置颜色：颜色值可以是rgb 十六进制英文名称
font-size：设置字体大小的样式，值是数值＋单位（px/pt/cm）
font-family：设置字体库，一般要选择通用的字体
font-style：字体样式斜体（italic）或者正常显示（normal）
font-weight：字体重量，加粗（bold）或者正常显示（normal）
font：是上述四个关于字体属性的缩写形式，在font属性中必须要设置两项：font-size以及font-family的值。font-weight和font-style如果有值要放在它们的前面；
```
p {
    font: bold italic 20px monospace;(√)
    font: 20px monospace bold italic;（×）
    font: bold italic;（×）
    font: 20px monospace;（√）
}
```
text-align：文本水平对齐方式，它有三个值：left、center、right
border：设置边框它是缩写包括三个子属性：
- border-width：边框宽度，一个数值＋单位
- border-style：线条样式，可选值较多常用的是 solid、dashed、dotted、groove等
- border-color：边框颜色
width：设置宽度，只有块级元素才可设置行内元素无效
height：设置高度，只有块级元素才可设置行内元素无效
background-color：设置背景颜色，使用三种模式
background-image：设置背景图片值是一个url地址
background-repeat ：设置图片的填充方式，repeat-x、repeat-y、no-repeat
background-position：设置图片的位置，有几个固定值：left/center/right top/center/bottom
text-decoration：设置文本的装饰效果，它有这几个值：underline、line-through、overline

样式分类

css代码的语法虽然非常简单，但根据其代码可以出现的位置，可以将css分为3种类型：内联样式，外联样式，行内样式。也可以称为3种引入方式。

内联样式：就是在HTML页面中使用<style></style>嵌入的样式
外联样式：当页面中的CSS较多时，在HTML中不便于维护。可以将它们放入一个专门的样式文件中。这一个文件要以.css作为后缀名。然后在html中使用link标签引入该样式文件。
行内样式：是指在HTML标签中使用style属性直接定义该标签的样式

当一个标签同时以上述三种方式设置了同一个样式属性时，它的优先级如下：

行内样式 > 内联样式 >外部样式，近水楼台先得月（就近原则），当然可以使用!important来提升优先级。

更多精彩内容欢迎点击我的博客

xycy123_com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签

列表标签ul(unorder list)无序列表，它是声明一个列表的集合（整体），一个封装容器。ul有两个属性：type ：指定列表的项目符号，默认是disc实心圆可选值有circle、squarecontenteditable ：内容是否可编辑，它是H5新增的属性li(list) 创建列表中的每项内容，每个列表项都有一个项目符号，可以通过type属性来单独设置某个列表的符号ol(order list)有序列表，它也是声明一个列表的封装容器。ol支持三个属性：start：列表的起始标
复制链接

扫一扫