HTML个人笔记

目录

• HTML
  • 一.站点及文件名规范
  • 二.标签
    • 《1》分为单双标签：
    • 《2》标签特点：
  • 三.常用标签
    • 《1》快捷写法
    • 《2》标题标签 h1-h6
    • 《3》段落标签 p
    • 《4》空格符 & nbsp；(不属于标签，是特殊符号)
    • 《5》换行标签 br
    • 《6》分割线 hr
    • 《7》加粗 b ，strong
    • 《8》倾斜 i ，em
    • 《9》拓展
      • 1.下划线 u
      • 2.删除线 s ，del
      • 3.上标 sup 下标 sub
  • 四.列表
    • • 《1》无序列表 ul
      • 《2》有序列表 ol
      • 《3》自定义列表 dl
      • 《4》特点
  • 五.路径
    • 《1》相对路径：
    • 《2》绝对路径：
    • 《3》网络路径：
  • 六.图片标签 img
    • src 属性
    • alt 属性
    • title 属性
  • 七.超链接标签 a
    • href 属性
    • target 属性
    • title 属性
    • 锚记：
  • 八.表单
    • 一，表单控件
      • 《1》input
      • 《2》下拉框 select> 下拉选项 option
      • 《3》文本域 textarea
      • 《4》表单的其他标签
        • 1， label 标签
          • 作用：绑定标签
        • 2，fieldset (负有来斯特) 表单字段集 legend (来g的) 字段集标题
    • 二，表单框form
    • 三，input新增控件
    • 四，input新增属性
      • • • 《1》搭配数值框和滑块使用的属性
          • 《2》搭配邮箱框使用的属性
          • 《3》多搭配单选框和多选框使用（不属于新增）
          • 《4》其他新增属性
          • 《5》搭配标签使用的新属性 list
          • 《6》校验输入框内容格式 pattern

HTML

一.站点及文件名规范

​ 1.以小写字母开头，数字，下划线命名，不得以中文，空格，特殊符号命名。

​ 2.站点需要创建html，css，js，images 文件夹和 index.html 文件。

​ 3.index.html 文件为首页文件，不得修改文件名称。

二.标签

《1》分为单双标签：

​ 1.单标签，单标记，元素：单个出现，/ 可以省略。

<input type="text" /> <input type="parssword">

​ 2.双标签，双标记，元素：成对出现，结束标签前面有 /。

<div> </div> <a href="" title="" target=""></a>

《2》标签特点：

• 第一个单词是标签名
• 标签名与属性之间用空格隔开
• 属性与属性值之间用=连接，属性值写在 " "内(单双引号都行)
• 属性与属性之间用空格隔开

三.常用标签

《1》快捷写法

• *生成几个
• $ 数字序号

  h$*6

  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

• lorem 出现一段文段测试时用

 <p>lorem</p>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis ex vitae ea, inventore obcaecati debitis nulla voluptatum aspernatur ullam illum ducimus magnam nobis repellendus aliquid voluptas eum laborum dignissimos consequuntur.</p>

《2》标题标签 h1-h6

  <h1>我是1级标题</h1>
  <h2>我是2级标题</h2>
  <h3>我是3级标题</h3>
  <h4>我是4级标题</h4>
  <h5>我是5级标题</h5>
  <h6>我是6级标题</h6>

• 独占一行
• 字体自带加粗
• 不同标题的字号不同
• 自带间距
• 双标签

《3》段落标签 p

  <p>我是段落标签</p>
  <p>我是段落标签</p>
  <p>我是段落标签</p>

• 独占一行
• 自带间距
• 双标签

《4》空格符 & nbsp；(不属于标签，是特殊符号)

 <p>&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat corrupti culpa, cumquesequi
    pariatur debitis
    facere impedit doloribus corporis aliquam voluptates id facilis recusandae nemo alias vel, odio repudiandae.
    Excepturi.</p>

《5》换行标签 br

 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat corrupti culpa, cumquesequi
    pariatur debiti<br>
    facere impedit doloribus corporis aliquam voluptates id facilis recusandae nemo alias vel, odio repudiandae.
    Excepturi.</p>

• 单标签，强制换行

《6》分割线 hr

 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat corrupti culpa, cumquesequi
    pariatur debitis
    <hr>
    facere impedit doloribus corporis aliquam voluptates id facilis recusandae nemo alias vel, odio repudiandae.
    Excepturi.

• 单标签，强制出现分割线

《7》加粗 b ，strong

<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本

• 双标签，不独占一行，让文字加粗
• strong 语义更强烈

《8》倾斜 i ，em

<em>强调文本</em>
<i>倾斜文本</i>

• 双标签，默认不独占一行，让字体倾斜
• em 语义更强烈
• font-style 文字倾斜 （oblique 倾斜的文字， normal 取消倾斜）

《9》拓展

1.下划线 u

会在标签包含的文本下面显示一条下划线

 <p><u>Lorem ipsum</u>, dolor sit amet consectetur adipisicing elit. Quis ex vitae ea, inventore obcaecati debitis
    nulla
 </p>

• 双标签，默认不独占一行

2.删除线 s ，del

会在所包含的文字中显示一条横杠表示删除

  <p><s>Lorem ipsum</s>, dolor sit amet consectetur adipisicing elit. Quis ex vitae ea, inventore obcaecati debitisnulla
    <del>voluptatum aspernatur</del> ullam illum ducimus magnam nobis repellendus aliquid voluptas eum laborum
    dignissimos
    consequuntur.
  </p>

• 双标签，默认不独占一行
• del 的语义更强烈

3.上标 sup 下标 sub

<p>15<sup>o</sup>C</p>

 <p>H<sub>2</sub>O=水</p>

• 双标签，默认不独占一行

四.列表

《1》无序列表 ul

 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

《2》有序列表 ol

 <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>

  <ol type="1" start="4">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>

  <ul type="1" start="4">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

type 类型 支持的属性值： 数字 1，小写的 a，大写的 A，小写的罗马数字 i ， 大写的罗马数字I

start 开始的属性值：只支持数字

《3》自定义列表 dl

  <dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </dl>  

《4》特点

• ul 和 ol 里面只能包含 li
• li 里面可以包含其他标签元素
• dl 里面只能有一个 dt 但是可以有多个 dd

五.路径

路径有三种及 绝对路径，相对路径，网络路径

《1》相对路径：

• 相对与当前图片来说的
• ../ 返回上一层
• xx/ 进入某个文件夹

 <img src="images/web.jpg" alt="">

《2》绝对路径：

• 相对于计算机来说
• 路径不够灵活，文件移动后路径将会失效

 <img src="C:\Users\xxl10\Desktop\前端\day2\images\web.jpg" alt="">

《3》网络路径：

以https：// 或者http://

<img src="https://img2.baidu.com/it/u=174991003,1991123578&fm=253&fmt=auto&app=120&f=JPEG?w=780&h=1170" alt="">

六.图片标签 img

src 属性

<img src="images/web.jpg">

​ 图片的路径

alt 属性

 <img src="images/web1.jpg" alt="前端">

图片无法加载时的文字提示

title 属性

<img src="images/web.jpg" title="前端">

鼠标悬停在图片上的提示

七.超链接标签 a

href 属性

<a href="目标文件路径及全称/连接地址" title="链接的标题" target="_blank">链接文本/图片</a>
<a href="#"></a>空链接
<a href="1.zip">下载</a> 下载连接 

​ 文件的路径

target 属性

​ 属性值：

​ _blank 在新页面跳转

​ _self 在当前页面跳转

<a href="#" target="_blank">新页面打开</a>

title 属性

<a href="https://www.baidu.com" title="百度">点击去百度</a>

• 鼠标悬停提示文字

锚记：

1，作用： 可以在页面不同位置进行跳转

2，实现：

 <div id="box1"></div>
 <a href="#box1">跳转到box1</a>

3，原理：a标签可以进行跳转，当我们不写页面路径时，默认跳转到当前页面

​ id在一个页面时唯一的，那么我们的a标签，href 可以跟一个#id名就能跳转到指定的位置.

八.表单

• 表单的作用：用来收集用户信息
• 表单的组成：表单域(form) ，提示信息 ， 表单元素(表单控件)
• 表单控件脱离表单域功能将会失效

一，表单控件

《1》input

特点：单标签 ， 默认不占一行 ， 自带大小

属性：

type：属性	类型
text	文本框
password	密码框
submit	提交按钮
reset	重置按钮
name	参数名
value	默认值/默认文本
button	空白按钮
radio	单选框(想要搭配name使用)
checkbox	复选框(想要搭配name使用)

  <form action="">
    <input type="text"><br>
    <input type="password"><br>
    <input type="submit" value="登录"><br>
    <input type="reset" value="清空">
  </form>

《2》下拉框 select> 下拉选项 option

​ select 下拉框

​ option 下拉选项

《3》文本域 textarea

​ 特点：可以随意改变大小。

​ 设置 resize：none; 可以取消

《4》表单的其他标签

1， label 标签

作用：绑定标签

​ 格式： 标签的文字信息，图片等

​

​ 功能：将label 里面的文字信息和有对应id名的标签进行绑定。

2，fieldset (负有来斯特) 表单字段集 legend (来g的) 字段集标题

​ fieldset 表单字段集 可以对表单中的内容进行分类

​ legend 字段集标题 (一般放在fieldset里面)

二，表单框form

​ 1，特点：所有的表单控件都必须写在表单框里。

​ 2，结构

​ action 提交信息的接口地址

​ method 提交方式

​ get 数据在地址栏中传递

​ post 数据在请求体传输(更安全，传输体积更大)

三，input新增控件

type属性	：
color	拾色器
tel	唤醒拨号盘 在移动端使用
search	搜索
number	数字框只能数字相关的0-9/e
range	滑动
email	邮箱框（会对邮箱格式进行简单的验证）
url	网址框（会对网址进行简单的验证）
date	日期选择框（选择年月日）
month	月份选择框（选择年月）
week	周选择框（选择年周）
time	时间选择框（选择时分）
datetime-local	本地时间选择框（选择本地年月日当前时间）

四，input新增属性

《1》搭配数值框和滑块使用的属性

属性	：
min	最小值
max	最大值
step	间距数值

《2》搭配邮箱框使用的属性

属性	：
multiple	也许邮箱输入多组值

《3》多搭配单选框和多选框使用（不属于新增）

属性	：
checked	默认选中
disabled	禁止使用/不可用

《4》其他新增属性

属性	：
placeholder	提示信息
autofocus	自动获取焦点（只识别第一个）
required	必填项
autocomplete	自动补全 on（默认开始自动补全）off（关闭自动补全）需要搭配name使用

《5》搭配标签使用的新属性 list

作用：绑定数据列表

格式：

 <datalist id="list1">
             <option value="xx">
             <option value="yy">
             <option value="zz">
     </datalist>
     <input type="search" name="search" autofocus placeholder="请输入关键词" list="list1">

《6》校验输入框内容格式 pattern