HTML基础知识

HTML：

表格 table（会使用）

由于性能不佳和样式不好调控，主要用于表示，让编辑代码的难度增加很多，不太建议使用，请做了解。

标签

标签	说明
<caption></caption>	表格标题
<table></table>	表格主体
<tr></tr>	表格行标签
<th></th>	表头单元格
<td></td>	单元格标签

属性

属性	描述
cellspace	单元格之间的距离
cellpadding	单元格内容与单元格边框的距离
width	表格宽度
height	表格高度
align	摒弃了，采用css中的text-align属性
colspan	合并列
rowspan	合并行

4.列表

标签名	描述
ul>li	无序列表
ol>li	有序列表
dl>dt(dd)	自定义列表

作业：根据所学元素写出一个个人简历单

第四天

1.表单标签（掌握）

<form></form>能写出常用的注册类表单，input表单常见属性

语法:

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

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

表单控件：

包含具体的功能项，如单行的文本输入框、密码输入框、复选框，提交按钮、重置按钮等

表单域：

form标签相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过action属性中的url地址，提交到对应的服务器，不定义表单域无法传送数据。

1.1 input标签（重点）

• 写法：

<input type="类型" value="xx" />
复制代码

• 不同的类型

属性	属性值	描述
type	text	文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	按钮
	submit	表单提交按钮
	reset	表单重置按钮
	file	文件控件
	color	选色板
	date/datetime	时间选择器
	range	滑块（属性：min、max、step）

• 属性值

  属性	属性值	描述
  name	自定义值	名称
  value	自定义值	默认的文本值
  size	自定义正整数	input显示的宽度
  checked	checked	默认选中
  maxlength	自定义正整数	默认输入最多的字符数量
  type	规定值	input的类型
  required	无	写上表示必须有值，不然无法提交
  readonly	无	写上表示只读
  disabled	无	写上表示无法选中

  示例：百度的高级搜索页面

  <form
        action="https://www.baidu.com/s"
        name="f1"
        target="_blank"
        method="GET"
      >
        <div>
          <label for="q1">
            <span>包含以下全部的关键词</span>
            <input id="q1" name="q1" type="text" />
          </label>
          <button type="submit">百度一下</button>
        </div>
        <div>
          <label for="q2">
            <span>包含以下的完整关键词</span>
            <input id="q2" name="q2" type="text" />
          </label>
        </div>
        <div>
          <label for="q3">
            <span>包含以下任意一个关键词</span>
            <input id="q3" name="q3" type="text" />
          </label>
        </div>
        <div>
          <label for="q4">
            <span>不包括以下关键词</span>
            <input id="q4" name="q4" type="text" />
          </label>
        </div>
        <div>
          <label for="rn">选择搜索结果显示的条数</label>
          <select name="rn">
            <option value="10" selected="selected">每页显示10条</option>
            <option value="20">每页显示20条</option>
            <option value="50">每页显示50条</option>
          </select>
        </div>
        <div>
          <label for="lm">选择搜索结果显示的条数</label>
          <select name="lm">
            <option value="0" selected="selected">全部时间</option>
            <option value="1">最近一天</option>
            <option value="7">最近一周</option>
            <option value="30">最近一月</option>
            <option value="360">最近一年</option>
          </select>
        </div>
        <div>
          <label for="ct">搜索网页语言是</label>
          <input name="ct" id="ct_0" value="0" checked="checked" type="radio" />
          <label for="ct_0">全部语言</label>
          <input name="ct" id="ct_1" value="1" type="radio" />
          <label for="ct_1">仅在简体中文中</label>
          <input name="ct" id="ct_2" value="2" type="radio" />
          <label for="ct_2">仅在繁体中文中</label>
        </div>
      </form>
  复制代码

1.2 label标签

提高用户的体验，点击label标签能够是label对应的表单控件获得焦点。

示例

<!-- 1.label直接包裹input -->
<label> 用户名： <input type="text" name="usename" value="请输入用户名">   </label>
<!-- 2. for属性跟随控件的id属性 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
复制代码

1.3 textarea标签——文本域

• 语法：

<!-- cols="每行中的字符数" rows="显示的行数"  -->
<textarea cols="4" rows="2">
  文本内容
</textarea>
复制代码

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

1.4 select下拉框

语法：

<!-- 通过其中的option进行下拉选择， selected表示选中 -->
<select>
  <option selected="selected ">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
复制代码

作业：仿照搜狗的高级搜索完成一个form表单

CSS：

css样式对比：

字体：

text-decoratiion 文本的装饰

• 作用： 通常用于给链接修改装饰效果

• 属性

  属性值	描述
  none	默认。定义标准的文本。 取消下划线（最常用）
  underline	定义文本下的一条线。下划线 也是我们链接自带的（常用）
  overline	定义文本上的一条线。（不用）
  line-through	定义穿过文本下的一条线。（不常用）

选择器类型： 

选择器类型	作用	写法
后代选择器	选择嵌套的后代元素	标识是 空格： div a
子代选择器	选择最近一层嵌套的后代元素	标识是 >： div>a
交集选择器	选择两个选择器都拥有的元素	无特殊符号： div.wrapper
并集选择器	选择一部分相同样式的元素	标识是, div, .wrapper, a
链接伪类选择器	给链接加上某种状态	重点记住 a{} 和 a:hover 实际开发的写法

元素转换：

- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
复制代码

显示模式	元素排列	样式	内容
块级元素	独占一行	可以设置高度宽度，默认宽度为容器的宽度	可包含任何元素
行内元素	一行可以放多个	不可以直接设置高宽度，默认为内容的宽度	只能包含文本和行内元素
行内块元素	一行可以放多个	可以设置高宽度，默认为内容的宽度

行高（line-height）

作用： 设置文本在垂直方向的位置

行高和高度的三种关系

• 如果 行高 等 高度 文字会 垂直居中
• 如果行高 大于 高度 文字会 偏下
• 如果行高小于高度 文字会 偏上

CSS背景样式（background）

作用： 通过css的背景属性，给元素添加背景样式，设置背景图的位置和大小

• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
• 语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

 继承性

理解： 后代标签会继承父标签的文本内容的样式属性，形状的样式则不会继承。

CSS优先级（权重）

理解： 当不同规则作用在同一元素，相同选择器会进行层叠，但选择器不同会出现优先级问题。 （!important > 内联样式 > id选择器 > 类（伪类）选择器 ，属性> 标签选择器 > 通配符、继承）

元素显示隐藏：

总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
opacity	只是设置其透明

界面样式

2.1 鼠标样式——cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor: 属性值
复制代码

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止
url(图片路径)	鼠标变成指定图片

2.2 轮廓线——outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 
复制代码

但是我们都不关心可以设置多少，我们平时都是去掉的。 li

最直接的写法是 ： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>
复制代码

2.3 拖拽——resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea  style="resize: none;"></textarea>
复制代码

同样resize不限于文本域的用法，任意元素都能够使用 注： 如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

值	描述
none	用户无法调整元素chicun
both	用户可调整元素的高度和宽度
horizontal	用户可调整元素的宽度
vertical	用户可调整元素的高度

3. 溢出文字处理

3.1 white-space

• white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ；默认处理方式
​
white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
复制代码

3.2 text-overflow 文字溢出

• 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 
​
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
复制代码

注意：

一定要首先强制一行内显示，再次和overflow属性 搭配使用

3.3 总结三步曲

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

vertical-align 垂直对齐

vertical-align : baseline |top |middle |bottom 
复制代码

设置或检索对象内容的垂直对其方式。

• 注意：

  vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

  特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

5.1 图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

5.2 去除图片底侧空白缝隙

• 原因：

  图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

  就是图片底侧会有一个空白缝隙。

• 解决的方法就是：

  • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。