复习-1

dai316
317 阅读10分钟

HTML

html 骨架

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<html></html> HTML 标签,页面中最大的标签,根标签。 <head></head> 文档的头部，注意在 head 标签中我们必须要设置的标签是 title <title></title>文档的标题，让页面拥有一个属于自己的网页标题 <body></body>文档的主题，元素包含文档的所有内容,页面内容基本都是放到 body 里

  • 网页的 head 标签里面，表示的是页面的配置，有什么配置？
  • 字符集、关键词、页面描述、页面标题、IE 适配、视口、iPhone 小图标等

头标签内部常见标签如下：

  • <title>：指定整个网页的标题，在浏览器最上方显示。
  • <base>：为页面上的所有链接规定默认地址或默认目标。
  • <meta>：提供有关页面的基本信息
  • <body>：用于定义 HTML 文档所要显示的内容，也称为主体标签。
  • <link>：定义文档与外部资源的关系

快捷键

  • Ctrl+B:显示/隐藏侧边栏
  • Ctrl+:创建多个编辑器(抄代码！)
  • Ctrl+1、2:切换到第 1、第 2 个编辑器
  • Ctrl+ -/+:放大(缩小)
  • Ctrl+shift+N:重新打开一个软件的窗口
  • Fn + ←（或 Win + ←）/Fn + →（或 Win + →）:将光标定位到当前行的最左/右侧
  • Ctrl+enter:在当前行的下方新增一行，然后跳至该行
  • Alt+↓/↑:将代码向下/上移动
  • Alt+Shift+↓/↑：将代码像下/上复制
  • Ctrl + Alt + ↓/↑：在连续的多列上，同时出现光标
  • Alt+鼠标点击处：在点击处同时出现光标
  • 选中某个文本，然后反复按住Ctrl + D键， 即可将全文中相同的词逐一加入选择
  • 选中一堆文本后，按住Alt + Shift + I键，既可在每一行的末尾都创建一个光标
  • Ctrl+U：将光标的移动撤回到上一个位置
  • Ctrl+Shift+F；搜索代码

排版标签

HTML 标签是分等级的，HTML 将所有的标签分为两种：

  • 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素

  • 容器级标签：div、h 系列、li、dt、dd。容器级标签里可以放置任何东西

标题标签

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有 align 属性，属性值可以是：left、center、right

段落标签 <p>

段落标签 p，上下生成空白行

  • p 标签为文本级标签里面只能放文字、图片、表单元素！

水平线标签 <hr />

水平分隔线，可以使文档结构清晰，层次分明。

换行标签 <br />

可以使文本强制换行

<div>和<span>标签

  • div 标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。
  • span 标签：和 div 的作用一致，但不换行。

字体标签

特殊字符(重要)

  • &nbsp;：空格
  • &lt;：小于号
  • &gt;：大于号

加粗、下划线、删除线、斜体

  • <b>或<strong>：加粗
  • <u>或<ins>：下划线
  • <s>或<del>：删除线
  • <i>或<em>：斜体

链接

base

  • 控制页面中所有超链接是以什么方式打开
<base target="_blank" />

超链接 <a>

超链接的属性

  • href：目标 URL，#为空链接
  • title：悬停文本。
  • name：主要用于设置一个锚点的名称。
  • target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
    • _self：在同一个网页中显示（默认值）
    • _blank：在新的窗口中打开。
    • _parent：在父窗口中显示
    • _top：在顶级窗口中显示

锚点链接

  • 同页面 
    <a href="#test">测试</a>
<h3 id="test">第一</h3>
  • 不同页面
<a href="test.html#test">测试</a>

<!--另一个页面test.html-->
<h3 id="test">第一</h3>

img 标签

  • src属性：指图片的路径。英文名称 source。
<!-- 当前目录中的图片 -->
<img src="2.jpg" />
<img src="./2.jpg" />

<!-- 上一级目录中的图片 -->
<img src="../2.jpg" />
<!-- `../`要么不写，要么就写在开头。 -->

  • width属性：图像的宽度。

  • height属性：图像的高度。 注：图片等比例缩放，只设置 width 和 height 其中一个即可

  • alt属性：当图片不可用（无法显示）的时候，代替图片显示的内容

  • title：提示性文本。鼠标悬停时出现的文本。

  • 图片的align属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。

列表标签

1、无序列表<ul>,无序列表的每一项是<li>

  • type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

2、有序列表<ol>，里面的每一项是<li>

  • type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。
 <ol type="i" start="4">
	<li>哈哈</li>
	<li>哈哈</li>
	<li>哈哈</li>
</ol>

3、自定义列表<dl>

<dl>没有属性。dl 的子元素只能是 dt 和 dd。

  • <dt>：列表的标题，这个标签是必须的
  • <dd>：列表的列表项

注：dt、dd 只能在 dl 里面；dl 里面只能有 dt、dd。

表格标签

<table>
  <tr>
    <td>1111</td>
    <td>2222</td>
    <td>3333</td>
    <td>4444</td>
  </tr>
</table>

<table>的属性：

  • border：边框。像素为单位。
  • style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）
  • width：宽度。像素为单位。
  • height：高度。像素为单位。
  • bordercolor：表格的边框颜色。
  • align：表格的水平对齐方式。属性值可以填：left right center。
  • cellpadding：单元格内容到边的距离
  • cellspacing：单元格和单元格之间的距离（外边距）
  • bgcolor="#99cc66"：表格的背景颜色。
  • background="路径src/..."：背景图片。 背景图片的优先级大于背景颜色。
  • bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
  • bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置 3D 的效果。
  • dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） 既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

<tr>：行

一个表格就是一行一行组成的。

属性：

  • dir：公有属性，设置这一行单元格内容的排列方式。可以取值：
    • ltr：从左到右（left to right，默认）
    • rtl：从右到左（right to left）
  • bgcolor：设置这一行的单元格的背景色。 注：没有 background 属性，即：无法设置这一行的背景图片，如果非要设置，可以用 css 实现。
  • height：一行的高度
  • align="center"：一行的内容水平居中显示，取值：left、center、right
  • valign="center"：一行的内容垂直居中，取值：top、middle、bottom

<td>：单元格

属性：

  • align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用 css 来解决。
  • valign：内容的纵向对齐方式。属性值可以填：top middle bottom
  • width：绝对值或者相对值(%)
  • height：单元格的高度
  • bgcolor：设置这个单元格的背景色。
  • background：设置这个单元格的背景图片。

单元格的合并

单元格的属性：

  • colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
  • rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。

<th>：加粗的单元格。相当于<td> + <b>

<caption>：表格的标题。使用时和tr标签并列

  • 属性：align，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom

表格的<thead>标签、<tbody>标签、<tfoot>标签

这三个标签有与没有的区别：

  • 1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照 thead、tbody、tfoot 的顺序依次来显示内容。如果不写 thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
  • 2、当表格非常大内容非常多的时候，如果用 thead、tbody、tfoot 标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

表单标签

表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

属性：

  • name：表单的名称，用于 JS 来操作或控制表单时使用；
  • id：表单的名称，用于 JS 来操作或控制表单时使用；
  • action：指定表单数据的处理程序，一般是 PHP，如：action=“login.php”
  • method：表单数据的提交方式，一般取值：get(默认)和 post

注意：表单和表格嵌套时，是在<form>标记中套<table>标记。

<input>：输入标签（文本框）

用于接收用户输入。

<input type="text" />

属性：

  • type="属性值"：文本类型。属性值可以是：

  • text（默认）

  • password：密码类型

  • radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的 name 属性。name 就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做 radio。

  • checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。

  • checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio"或者type=checkbox时，可以用这个属性。属性值也是 checked，可以省略。

  • hidden：隐藏框，在表单中包含不希望用户看见的信息

  • button：普通按钮，结合 js 代码进行使用。

  • submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写 value 自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到 form 标签的 action 属性中指定的那个页面中去。

  • reset：重置按钮，清空当前表单的内容，并设置为最初的默认值

  • image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。

  • file：文件选择框。

  • value="内容"：文本框里的默认内容（已经被填好了的）

  • size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。size 属性值的单位不是像素。

  • readonly：文本框只读，不能编辑。因为它的属性值也是 readonly，所以属性值可以不写。 用了这个属性之后，在 google 浏览器中，光标点不进去；在 IE 浏览器中，光标可以点进去，但是文字不能编辑。

  • disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

<select>：下拉列表标签

<select>标签里面的每一项用<option>表示。select 就是“选择”，option“选项”。

select 标签和 ul、ol、dl 一样，都是组标签。

<select>标签的属性：

  • multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=""，也可以写成multiple="multiple"。
  • size="3"：如果属性值大于 1，则列表为滚动视图。默认属性值为 1，即下拉视图。

<option>标签的属性：

  • selected：预选中。没有属性值。

<textarea>标签：多行文本输入框(文本域)

text 就是“文本”，area 就是“区域”。

属性：

  • rows="4"：指定文本区域的行数。
  • cols="20"：指定文本区域的列数。
  • readonly：只读

**<lable>**标签

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

上方代码中，让label标签的for 属性值，和 input 标签的 id 属性值相同，那么这个label和input就有绑定关系了。

avatar
文章
阅读
粉丝