HTML标签

列表标签

• 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锚点的使用有两点要求：

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

多媒体标签

• 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>

表单标签

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

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

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

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来提升优先级。

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