HTML 的笔记(上)

什么是 HTML

HTML：Hyper  Text  Markup  Language(超级文本标签语言)

HTML 页面结构

有两部分组成：

文档类型声明

作用：告诉浏览器使用的是 HTML 的哪个版本
语法：在网页的最顶端编写：
<!doctype html>

HTML 页面部分

作用：表示页面的开始和结束
语法：在文档类型声明的下面编写一对<html>标记
<html></html>
Html 标签里面有两个标签，分别是

  • <head></head>
    作用：表示网页的头部
  • <body></body>
    作用：表示网页的身体，以后页面中所有的要显示的内容，都要写在 body 标签里

HTML 语法

标记语法

标记又叫标签或者元素，在网页中表示一些功能，必须使用<>括起来，标记分为两大类

封闭类型标记

也叫双标记，必须成对出现，有开始和结束标签。
语法：<标记>内容</标记>
eg:<html> <head> <body> <title> <p> <b> <s>
<u> <i> <sup> <sub> <h1>~<h6> `

这是一级标签

这是一级标签

这是二级标签

这是二级标签

这是三级标签

这是三级标签

这是四级标签

这是四级标签

这是五级标签
这是五级标签
这是六级标签
这是六级标签

~、 #### 取值 + left 左对齐 + center居中对齐 + right右对齐 eg:骆驼祥子骆驼祥子 ### 段落元素 表示一段文字,独占一行标签：### 预格式化 保留HTML代码中的回车和空格语法： 网页中的图像 用于表示网络中任意资源(图片、视频、音频、文件)的位置（或路径） URL：统一资源定位符(Uniform Resource Locator) 路径的表现形式： 1.绝对路径：从文件所在的最高级目录开始查找所经过的路径 2.相对路径从当前文件位置出开始查找所经过的路径 图像的标签： 超链接语法：` 属性： 取值：

1._self：默认值，在当前的标签页中打开新网页
2._blank：在新标签页中打开新网页 超链接的其他用法： 1.资源下载 让链接的 href 等于.rar 或者.zip 即可
<a href=”1.zip”>点我下载</a> 2.电子邮件链接 <a href=”mailto:邮箱地址”>联系我们</a>
<a href="mailto:2831843232@qq.com"> 3.锚点就是网页中的一个记号，通过超链接可以迅速到达记号所在的位置. 实现步骤： 4、返回顶部 <a href=”#”>返回顶部</a> 块级元素和行内元素 块级元素 在网页中独占一行，可以设置宽高 比如<h1>~<h6>,<p>，<hr>，<table>、div、ul、ol、li、pre、tr、td、form 行内元素 和其他元素在一行显示,大部分行内元素不可以设置宽高 <a>,<img><b><s><u><i><sub><sup>,<span>
可以设置宽高的行内元素有：<img> input;
<span>:处理同一行文本的不同形式 列表 作用：按照从上到下的方式来显示所有的数据，并且在数据前添加一些标识 列表的组成 由列表类型和列表项组成 1.列表类型： 有序列表:<ol></ol>    —Order list
无序列表：<ul></ul>   —Unorder list 2.列表项： 用于表示列表中的数据：<li></li>     —List  item 列表属性： 有序列表在属性： 无序列表的属性： 列表的嵌套 在一个列表项中又出现了一个列表 被嵌套的列表只能出现在<li>中，不能乱放
定义列表： 通常用对某个名词的解释 语法： <dl></dl>  —–definition  list(定义列表) <dt></dt> 定义要解释的名词 <dd></dd> 表示定义列表中对名字的解释内容 结构标记 作用：用于描述整个网页的结构，提升标记的语义性 常用的语义标记 他们的本质都是 div 标签<div></div>：表示块区元素，独占一行，用于表示一个区域。是 H5 新增的语义化新标签 表格 表格是由单元格按照从左到右，从上到下的顺序排列而成的。 标签 表格：<table></table> 行：`` ----table row 表示一行 列或单元格： ----table data 表示一个单元格 表格的属性： 被跨掉的单元格必须删除 可选标记 注意：若不对table中的数据进行分组，默认都在 表单 作用 标签

` 属性 可视化控件

COPY 
相对路径口诀：
			同目录，直接用（直接填写图片名）
			子目录，先进入，再使用
			<img src="1/1.jpg" >
			父目录，先返回，再使用
			../表示返回上一级目录

  1. src(必须属性)：要显示的图片的 url（相对/绝对）
  2. width：设置图片宽度，单位是 px 或%
  3. height：设置图片高度，单位是 px 或%
  4. alt：鼠标移至图片时显示的文字
  5. title：图片加载不出来时显示的文字

  • href：
    链接到那个地址
    此属性，必须有，如果没有此属性：<a>标签将不具有超链接的功能<a href="https://www.baidu.com">百度一下</a>
  • target：
    指定打开新网页的方式

第一步：定义锚点

第二步：链接到锚点

方式一：使用任意标签的 id 属性定义锚点

<h1 id=”锚点名字”>化妆品区域</h1>

方式二：使用 a 标签的 name 属性，定义锚点

<a name=”锚点名字”>化妆品区域</a>

<a href=”#锚点名字”>化妆品</a>

COPY 
语法：
<ol>
  <li>篮球</li>
  <li>足球</li>
  <li>排球</li>
  <li>台球</li>
</ol>

  • type
    作用：指定列表标识的类型
  • 取值：
    • 1：按数字排列，默认值
    • a:按小写字母排列
    • A：按大写字母排列
    • i:按小写罗马数字排列
    • I：按大些罗马字母排列
  • start
    作用：指定起始编号从几开始，是数字
  • type：
    作用：指定列表标识的类型
  • 取值：
    • disc   默认值，实心圆
    • circle   空心圆
    • square   实心方块
    • none   不显示标识（最常用）
COPY 
格式：
<dl>
  <dt>《水浒传》</dt>
  <dd>中国四大名著</dd>
</dl>

  1. <header></header>
    作用：定义网页或某部分内容的头部
  2. <nav></nav>
    作用：定义网页的导航链接部分
  3. <section></section>
    作用：表示网页的主体内容
  4. <article></article>
    作用：定义与文字描述相关的内容
  5. <aside></aside>
    作用：定义页面中侧边栏的信息
  6. <footer></footer>
    作用：定义某区域的底部信息

COPY 
表格的写法：
<table>
  <tr>
    行必须写在表里面
    <td></td>
    单元格必须写在row里面
    <td></td>
  </tr>
  <tr></tr>
</table>

  • table 的属性:
    • width
      设置表格的宽度，单位是 px 或%
    • height
      设置表格的高度，单位是 px 或%
    • align
      设置表格的水平对齐方式
      left/center/right
    • border
      设置表格的边框宽度，默认值是 0，没有单位
    • bgcolor
      设置背景颜色，取值为对应颜色的英文
    • cellspacing
      表示单元格的外边距，就是单元格与单元格之间的距离
    • cellpadding
      设置单元格的内边距，就是单元格与内容的距离
  • tr 的属性：
    • align
      设置当前行里面内容的水平对齐方式 - 取值：left/center/right
    • valign
      设置当前行里面内容的垂直对齐方式 - 取值：top(顶部)middle(居中)/bottom（底部）
    • bgcolor：
      设置该行的背景颜色
  • td 的属性：
    • width,设置单元格的宽度
    • height
    • align
    • valign
    • bgcolor
    • colspan:   跨列
    • rowspan：跨行

  • 表格的标题：<caption></caption>必须写在<table>标签的第一行，一个表格只能有一个标题
  • 所有的<td>标签都可以被<th>标签替换，table header 内容的标题
  • 行分组可以将连续的几个行，划分到一个组中，进行统一的管理。
    • 表头行分组<thead></thead>表格中最上面的一行或几行，进行分组，就可以将这一行放在<thead>标签里
    • 表尾行分组<tfoot></tfoot>表格中最后一行进行分组的话，可以放在<tfoot>标签中
    • 表主体行分组<tbody></tbody>可以将若干个行，放在<tbody>中,进行统一设置
COPY 
+ 表格的嵌套被嵌套的表格必须写在`<td>`里面.

  1. 提供可以与用户**_交互_**的可视化界面
  2. 收集用户信息并提交给服务器

  1. action 作用：定义表单内容被提交到哪个服务器里，后面跟 url
  2. method   作用：定义表单数据的提交方式
    • 作用：定义表单数据的提交方式
    • 取值：
      1. get 默认是 get
      2. post

  • 分类
    1. input 元素
    2. textarea 多行文本域元素
    3. select 和 option 选项框元素
    4. 其他元素
  • Input 元素
    • 作用：在页面中提供各种各样的输入控件
    • 语法：<input>或者<input />
    • 属性： 1. type     指定创建输入控件的类型 - 取值 1. text   文本框 1. password 密码框 1. submit   提交按钮 1. reset   重置按钮 1. radio   单选框(单选框需要分组才能使用
      使用 name 属性分组，让两个单选框的 name 值一致即可) 1. checkbox 多选框 1. file   文件选择框(用于上传文件) 2. value     指定控件的值 2. placeholder     占位符，默认显示在控件上的文本 2. readonly     只能看，不能改，没有值 2. disabled     禁用控件，没有值
    • 表单辅助标签
      • <input type=”checkbox” id=”login”>
      • <label for=”login”>下次自动登录</label>