Skip to content

HTML

文件标签

标签 作用
<html> 代表当前书写的是一个HTML文档
<head> 存储的本页面的一些重要的信息，它不会显示
<title> 用于定义页面的标题的，是head的子标签
<body>
test 用于设置文字颜色
bgcolor 用于设置页面背景色
background 用于设置页面背景图片

排版标签

标签 功能
\<!-- 注释 --> 注释
\<br/> or \<br> 换行
\<p>
常用标签：align :设置对齐方式		 段落，会自动换行
对齐方式：left right center
\<hr>
常用标签：align , size , width , color		 水平线标签
\<div> 块标签，起到容器的作用，会自动换行

字体标签

\<font>常用属性 功能
face 字体，例如：宋体，隶书
size 用于设置字的大小 默认设置1-7，7最大
color 用于设置字的颜色

颜色的表达方式：

  1. 使用十六进制，取值范围 #000000 ~ #FFFFFF 当颜色值成对时，例如：#cc3300 可以简化为： #c30
  2. RGB颜色表示法：RGB(x,y,x) 。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓
标签 作用
\

... \

| 给一段文字起一个标题
自动换行，字体加粗，相互之前有一定的距离 | | \ | 字体加粗 | | \ | 字体倾斜 | | \ | 删除线 | | \ | 下划线 | ## 列表标签 - ol：有序列表 - type='A'：字母排序 - type='I'：罗马排序 - start=“3” 序列从几开始 - ul：无序列表 - type="disc"：默认，实心圆 - type="square"：方块 - type="circle"：空心圆 ## 图像标签 | \常用属性 | 作用 | | ------------------------------------------------------- | ---------------------- | | src | 图片的路径 | | width | 图片宽度 | | height | 图片高度 | | border | 图片边框 | | alt | 图片不显示时的文本信息 | | title | 鼠标悬停时的文本信息 | | align
可取值：left , right , middle , top , bottom | 图片附件文字的对其方式 | ## 超链接标签 | \常用属性 | 作用 | | ---------------------------------- | ------------------------------------------------------------ | | href | 要跳转的路径 | | target
可取值：_blank , _self | 规定在何处打开这个链接
可取值：新窗口 ， 本窗口（默认） | 
<!-- 发邮件 -->
<a href="mailto:sunguoan@163.com">联系站长</a>

<!-- qq聊天窗口 -->
<a href="tencent://message/?uin=19998539&Menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
</a>
## 表格
<table> 定义一个表格ge-20221222121946812.png" alt="image-20221222121946812" /> border剑客.assets/image-20221222121946812.png" alt="image-20221222121946812" /> 边框，取值单位为像素ets/image-20221222121946812.png" alt="image-20221222121946812" /> src="./前端三剑客.assets/image-20221222121946812.png" alt="image-20221222121946812" />
width务器端。简单说，通过表单可以将要提交的数据提交到指定的位置。 - 但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。 - 常见的 登录页面、注册页面 都离不开表单的应用 | \ 表格的宽度到服务器端。简单说，通过表单可以将要提交的数据提交到指定的位置。 - 但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。 - 常见的 登录页面、注册页面 都离不开表单的应用 | \ 可以让我们将录入信息携带到服务器端。简单说，通过表单可以将要提交的数据提交到指定的位置。 - 但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。 - 常见的 登录页面、注册页面 都离不开表单的应用 | \
align| \ left | 作用 | | ---------------------------- | ------------------------------------------------------------ | | action | 表单提交的目的地 | | method
左对齐 | 作用 | | ---------------------------- | ------------------------------------------------------------ | | action | 表单提交的目的地 | | method
-------------------------- | ------------------------------------------------------------ | | action | 表单提交的目的地 | | method
rightget , post | 表单提交的方式
右对齐 | \ 表单中的元素（控件） | \
center | 作用 | | ------------------------------------------------------------ | ------------------------ | | text
居中对齐---------------------------------------------- | ------------------------ | | text
xt
cellspacing | 多选框/复选框 | | radio | 单选按钮 | | file | 上传文件 | | reset | 重置按钮 | | submit | 提交按钮 | | button | 普通按钮 | | 其他元素 | 作用 | | ---------------------------------------- | ------------------------------------ | | \ 单元格间距，通常设置0为单线表格 | 单选按钮 | | file | 上传文件 | | reset | 重置按钮 | | submit | 提交按钮 | | button | 普通按钮 | | 其他元素 | 作用 | | ---------------------------------------- | ------------------------------------ | | \ le | 上传文件 | | reset | 重置按钮 | | submit | 提交按钮 | | button | 普通按钮 | | 其他元素 | 作用 | | ---------------------------------------- | ------------------------------------ | | \
<tr> 表格中的行(table row) | 提交按钮 | | button | 普通按钮 | | 其他元素 | 作用 | | ---------------------------------------- | ------------------------------------ | | \ align | 普通按钮 | | 其他元素 | 作用 | | ---------------------------------------- | ------------------------------------ | | \ 对齐方式 | 作用 | | ---------------------------------------- | ------------------------------------ | | \ 元素 | 作用 | | ---------------------------------------- | ------------------------------------ | | \
<td>表格中的单元格(table DataCell) | | \ textarea\>
colspan> 合并列具有名称，便于服务器识别 > 单选框要想可以一次只选择一个，要具有相同的name >
rowspane\> 合并行ameset> 通过\ 
<table border="1" width="400px" align="center" cellspacing="0">
    <tr align="center">
        <td colspan="3">计划统计表</td>
    </tr>
    <tr>
        <td rowspan="3">收入金额</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>11</td>
        <td>12</td>
    </tr>
</table>
image-20221222121946812 ## 表单标签 - 表单可以让我们将录入信息携带到服务器端。简单说，通过表单可以将要提交的数据提交到指定的位置。 - 但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。 - 常见的 登录页面、注册页面 都离不开表单的应用 | \属性 | 作用 | | ---------------------------- | ------------------------------------------------------------ | | action | 表单提交的目的地 | | method
方式：get , post | 表单提交的方式
get：明文提交，传送数据量少
post：密文提交，传送数据量大 | ### 表单中的元素（控件） | \的type属性 | 作用 | | ------------------------------------------------------------ | ------------------------ | | text
--placeholder：提示文本
--maxlength：最多可输入的字符数量 | 默认值：普通的文本输入框 | | password | 密码输入框 | | checkbox
--checked：被选中 | 多选框/复选框 | | radio | 单选按钮 | | file | 上传文件 | | reset | 重置按钮 | | submit | 提交按钮 | | button | 普通按钮 | | 其他元素 | 作用 | | ---------------------------------------- | ------------------------------------ | | \
--option：selected被选中 | 下拉列表/下拉框 | | \ | 文本域：多行文本框 | | \ | 按钮，可以用在form中，也可以单独使用 | > 1. 所有表单中的元素都要具有名称，便于服务器识别 > 2. 单选框要想可以一次只选择一个，要具有相同的name > 3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值 ## 框架标签 通过\和框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面 > 框架标签和body标签不共存。“有你没我，有我没你” 
<frameset rows="10%,*,13%">
    <frame src="top.html"></frame>
    <frameset cols="15%,*">
        <frame src="left.html"></frame>
        <frame src="right.html"></frame>
    </frameset>
    <frame src="foot.html"></frame>
</frameset>
## 其他标签和特殊字符 ### \ \标签必须写在标签之间. 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1. 当前页面的字符编码gbk：中文简体 2. 这里的名字是viewport（显示窗口） 数据是文本内容content="width=device-width,initial-scale=1.0"，也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0 3. 每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染 
<!-- 通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面 -->
<meta http-equiv="refresh" content="5; url=http://www.lagou.com">
### \标签 使用link标签来导入css link标签必须写在\中 ### 特殊字符 ![19](./前端三剑客.assets/19.png) ![20](./前端三剑客.assets/20.png) ## HTML5新特性 H5包含H4 ### 区别 1. 大小写不敏感 2. 引号可以省略 3. 书写时可以省略结尾标签 ### 新增语义化标签 - section标签：表示页面中的内容区域，部分，页面的主体部分 - article标签：文章 - aside标签：文章内容之外的，标题 - header标签：头部，页眉，页面的顶部 - hgroup标签：内容与标题的组合 - nav标签：导航 - figure标签：图文并茂 - foot：页脚，页面的底部 ![000](./前端三剑客.assets/000.png) ### 媒体标签 想在网页上播放视频，就要使用\，属性有： - src：媒体资源文件的位置 - controls：控制面板 - autoplay：自动播放（谷歌失效，360浏览器可以） - loop：循环播放 
<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>
### 新增表单控件 表单的控件更加丰富了 - \，修改type属性： - color：调色板 - date：日历 - month：月历 - week：周历 - number：数值域 - min：最小值（默认值是1） - max：最大值（默认值无上限） - step：递增量 - range：滑块 - search：搜索框（带×号，可一键删除框中内容） - 进度条\ - 高亮\ - 联想输入框\ （模糊查询） - 选项\ # CSS ## CSS与HTML结合方式 ### 内联/行内样式 使用style属性来引用css代码 - 优点：简单方便 - 缺点：只能对一个标签进行修饰。 
<div style="color:red"> hello world </div>
### 内部样式表 我们通过\