html总结

HTML

块元素

1.需要避免在同一个网页中多次使用h1元素,h1经常用在网页的标题或者是logo上

有序列表和无序列表

  • 无序列表
    • ul 表示无序列表,表示出是带有项目符号列表
    • ul元素前边的符号可以是任何的形式 ,我们可以通过css的list-style-type属性控制
    • 没有规定ul和li嵌套的深度
  • 有序列表
    • ol 表示有序列表,显示出是带有编号的列表
    • ol元素前边的编号可以是任何的形式 我们可以通过css的list-style-type属性控制
    • 没有规定ul和li嵌套的深度
  • 无论是 ul 还是 ol ,列表中每个具体的列表项都使用的是 li 标签
  • 使用规范:
    • ul li 、 ol li 是组合标签
    • ol或ul的子元素 必须只能是li,li的父元素只能是ol或ul。根据规范,不建议在ul和li嵌套的中间 书写其他元素
    • li中可以嵌套任何元素

ul和ol也可以用于重复结构的 大块内容布局。

自定义列表

  • 定义列表包括 dl 、dt 、dd 三种标签
  • 自定义列表是包含 术语 和 对术语描述 的列表 ,通常用来展示词汇表或者是对内容的解释
  • 其中 dl 标签表示定义列表,dt标签表示定义列表的标题,dd 标签定义了列表的内容
  • dl dt dd是组合标签

块标签的特性

  • 独占一行,换行显示
  • 可以设置宽高
  • 可以容纳行内元素和其他块元素(p标签、h标签都只能嵌套行元素或行内块元素)

行内元素

em、strong、var元素

  • em标签-强调作用:标出用户着重需要阅读的内容,但是主要也给SEO(搜索引擎优化)强调,呈现的是倾斜的状态
  • strong-强调(更强的强调)作用:表示文本十分重要,主要也给SEO(搜索引擎优化)强调,呈现的是一个加粗
  • em对某一个关键词强调
  • strong代表更强:比如 对某一句话直接强调

相对路径

相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。

  • ./ :代表文件所在的目录(可以省略不写)
  • …/ :代表文件所在的父级目录
  • …/…/ :代表文件所在的父级目录的父级目录
  • / :代表文件所在的根目录,可以理解成项目内部的绝对路径。

a标签的基础用法

  1. a标签用来做跳转
  2. a标签就是超链接:可以创建通向其他网页 文件 同一个页面的位置 邮件地址 或者其他url链接 链接电话 链接短信
  3. a标签的href属性,用来写地址:如果是网络地址 需要写全http://或者https://协议。如果写本地地址,使用相对路径即可
  4. title属性:是鼠标悬浮在a链接上的时候,对当前链接的提示信息,弹窗显示
  5. target属性:_self:在当前标签页跳转; _blank:在新的标签页打开跳转

a标签的锚链接

锚链接的两种效果:

  1. 在当前页面中跳转.:通过元素的ID进行跳转 <a href="#name"></a>
  2. 在a标签的href中书写 #+名字(自由命名,注意规范)
  3. 在相对应的跳转点标签 书写id属性 值为 锚链接中的名字,这样点击锚链接就能跳转到相对应的位置

网页中的返回顶部效果

<div class="con" style='height: 1000px;background-color: red;'>我很高,生成滚动条了</div>
<a href="#">点击我回到顶部</a>

a标签的其他功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签的其他功能</title>
</head>
<body>
<!--a标签下载:
    1.当连接的文件能够使用浏览器打开,那么可以进行打开,否则将直接下载
    2.也可以给a标签一个download属性 书写下载文件的路径,那么可以直接下载
    3.a标签必须书写href属性,哪怕为空都可以执行download下载,否则a标签不具有任何功能
 -->
<a href="" download="../images/01.png">点击下载图片</a>
<a href="../note/9.10_html02.pptx">点击下载图片</a>

<!--a标签对电话短信email的支持 主要针对移动端
    1.a标签的打电话是在href属性中书写   tel:电话号码  这样的格式
    2.a标签的发短信是在href属性中书写   sms:电话号码  这样的格式
    3.a标签的发送邮件是在href属性中书写 mailto:邮箱地址 这样的格式
-->
<a href="tel:15700000000">给李华打电话</a>
<a href="sms:15700000000">给李华发短信</a>
<a href="mailto:lihua@atguigu.com">给李华发邮件</a>
</body>
</html>

img标签

  • 向网页中嵌入一张图像
  • src 属性用于设置图像路径(本地相对路径或网络路径)
  • alt 属性是用于设置图像的替代文本,当网速慢等因素造成图片加载失败替代原图片显示的文字
  • title 属性是用于鼠标放在图片上显示出来的对图片的解释
  • width属性和height属性可以设置图片的宽和高

行内元素的属性

  1. 在一行中如有剩余空间,允许同其他 行内/行内块 标签公用一行(行内显示)
  2. 不可以直接设置宽高(宽高无效),默认的宽高由内容决定
  3. 行标签只能嵌套行标签

表单元素

input:type类型的值不一样,呈现的状态也是不一样的

  • text: 单行文本输入框(文本域) 没有长度和内容限制,只能输入一行,明文显示 表单提交都是以键值对的形式提交的

    name属性就是给表单起一个名字(自己命名,一般是后台提供) value属性就是表单的值,可以预定义 也可以等待用户输入 name和value就构成了一个键值对 如果构不成一个键值对,就不会进行提交

  • password: 密码输入框 默认把输入的内容呈现出小黑点

  • radio: 单选框 书写name属性后,可以在同name属性的单选框中进行单选 应该书写value值,是向后台提供的数据 在单选框前后写的内容,和input没有任何关系,只不过让用户视觉上觉得有关联

  • checkbox: 多选框 其他同单选框

  • file: 上传文件按钮

  • hidden: 提交隐藏内容 在表单提交过程中有的数据需要提交,但是不需要用户输入或者是修改,那么直接使用隐藏域提交

  • button: 单纯的按钮,没有任何作用和功能,只是长了按钮的样子 如果需要添加功能,可以使用js value值是按钮中的文字

  • reset: 重置按钮 当重置按钮被点击,就会重置当前reset所在的表单,变成默认的状态

  • submit: 提交按钮 input标签的type类型是submit代表提交 value是按钮显示的内容 提交按钮只会提交当前按钮所在的form表单中的内容 如果没有form标签,表单提交失效

button:

  • HTML <button> 元素表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方。

  • type:button的类型。可选值:

    submit: 此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。

    reset: 此按钮重置所有组件为初始值。

    button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。

button和input的区别

  • 在 button 元素内部,可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。
  • 二者相比较,<button> 控件提供了更为强大的功能和更丰富的内容。
  • <button></button>标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
<!--
        使用实体
        在html中,会把一个或多个空格或回车解析成一个空格显示
        在html中 特殊符号,一般不会直接书写,而是使用代表这个符号的实体(编码)

        空格: &nbsp;
        大于:&gt;
        小于:&lt;
        版权:&copy;
        双引号:&quot;
    -->
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页