HTML

HTML是什么

超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。

是一种浏览器可识别的规则

HTML不是什么

HTML是一种标记语言(markup language),它不是一种编程语言。

HTML使用标签来描述网页。

HTML注释

<!--注释内容-->

标签又称为:标记

    双闭合标签
        示例:<html></html>
    单闭合标签
        示例:<meta charset="UTF-8">

标签分类

块级标签:h1~h6, p, br, ht, div

块级标签内部可以嵌套任意的块级标签和行内标签

特列:p虽然是块级标签 但是它的内部只能嵌套行内标签 不能嵌套块级标签,如果嵌套了 没有问题 知识不符合html语法规范

行内标签:u, s, i, b, span

自身文本多大 就占多大

行内标签内部不能嵌套块级标签和行内标签

head标签

  1. title标签:显示网站的标题
  2. meta标签:提供有关页面的元信息
  3. style标签:定义内部样式表
  4. link标签:链接css资源文件、网站图标
  5. script标签:链接脚本js文件

body标签

标签基本标签

h1~h6标题标签

s: 删除线

b: 加粗

u: 下划线

i: 斜体

p: 独占一行

br: 换行

hr: 分割线

段落标签

p标签,每个段落都要用p标签包裹

示例:<p>内容</p>

超链接标签

a标签

示例:<a href="网址">内容

a属性:

  1. href:链接新网址,回到顶部,跳转邮箱,下载文件
  2. title:鼠标悬浮上的标题
  3. style:行内样式
  4. target:目标 _self:默认值,在当前页面中打开新的链接

​ _blank:在新的空白页面打开新的链接

清除下划线:

text-decoration: none;

none;无线

underline:下划线
overline:上划线
line-through:删除线

图片标签

img标签

示例<img src="" alt="头像">

img属性:

  1. src:图片的资源地址
  2. alt:图片加载失败时显示的标题
  3. title:鼠标悬浮时显示的标题
  4. width:设置图片的宽度
  5. height:设置图片的高度

字体标签

  1. 粗体标签:<b>或<strong>
  2. 斜体标签:<i>或<em>
  3. 上标:<sup>
  4. 下标:<sub>

列表标签

  • 无序列表 <ul> ,无序列表中的每一项是<li>

ul: unordered list

li: list item(列表项)

ul 属性:type

  1. disc: 实心圆点,默认
  2. square: 实心方点
  3. circle: 空心圆
  4. 设置为无序号: list-style: none

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

ol: ordered list

表格标签

table标签

表格:<table>, 表头:<th>, 行 <tr>, 列:<td>

table属性:

border: 边框

cellspacing:单元格和单元格之间的距离(外边距)

bordercolor:表格的边框颜色

<table border='1' cellspacing=0>
 <th>
     <td>id</td>
     <td>name</td>
 </th>
 <tr>
     <td>1</td>
     <td>mjj</td>
 </tr>
</table>

form表单标签

获取用户输入(选择,上传文件。。)并且将数据打包发送非后端

action: 用来控制数据提交的路径(到底朝哪个后端服务器提交数据)

三种写法:1.不写 默认就是朝当前该页面所在的地址提交数据

​ 2.全路径(https://www.baidu.com)

​ 3.只写路径后缀(/index/)

method:表单数据的提交方式,默认get,还有post

  1. get: 明文提交,不安全,只能提交2kb信息,提交的内容会在地址上显示
  2. post: 密文提交,安全,可以提交大量信息
  3. enctype:表单数据的编码方式(加密方式),只能在post方式下使用

input标签

type属性:

  • text: 纯文本, password:密文

  • date: 日期,datetime-local: 准确时间

  • radio:多选一, checkbox: 多选多

默认:checked="checked" 当标签的属性名和属性值相同的时候 可以只写属性名

​ 女<input type="radio" name="gender" checked="checked">

​ 简写

​ 女<input type="radio" name="gender" checked>

  • reset: 重置

  • button: 普通按钮

  • submit: 触发form表单提交动作

  • name: 提交到当前服务器的名称, value: 提交到当前服务器的值

  • file: 上传文件

  • textarea标签,获取大段文本, cols: 指定文本区域列数, rows指定文本区域行数

lable通常是配合input一起使用

for 属性规定 label 与哪个表单元素绑定。实现点击关联字光标在关联输入框闪烁

点击lable标签内的内容, 会自动让对应的input标签 聚焦 (点击文字就可以把光标放到输入框内)

<label for="d2">我是谁</label>
<input type="text" id="d2">

input获取到的用户输入就类似于是字典的value

input中的name属性就类似于是字典的key

select标签 下拉框, 一个个选项就是一个个option标签,可以加一个multiple该成多选

​ <select name="" id="" multiple>

默认选中 selected="selected"

能够触发form表单提交数据的按钮

盒子标签

div标签:division,分割

定义:把网页分割成不同的独立的逻辑区域,必须独占一行

div属性:

align:设置区域的位置,可选left, right, center

span标签

定义:小区域标签,在不影响文本正常的情况下,单独设置对应的样式

span和div的唯一区别:span是不换行的,div是换行的

 posted on 2019-12-25 20:18  Rannie`  阅读(462)  评论(0编辑  收藏  举报
去除动画
找回动画