HTML

最新推荐文章于 2021-12-04 15:31:20 发布

ノラガミ

最新推荐文章于 2021-12-04 15:31:20 发布

阅读量70

点赞数

本文链接：https://blog.csdn.net/weixin_45407027/article/details/102471307

版权

HTML

" 超文本标记语言"，英文全称是 HyperText Markup Language ，简称 HTML

HTML的构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

-开始标记
-头
-内容
-结束标记
html中的注释的书写格式：–
<!Doctype html> 声明(文本类型，文件的编码格式)
meta charset=“UTF-8”
- 文件的编码格式
- 文件乱码的原因在于文件书写的编码格式和文件解析的编码格式不一致
- 文件书写的编码格式：UTF-8
- 文件解析的编码格式：UTF-8
- 告诉浏览器文件的编码格式
标签|标记：<关键字>
- 学习html就是在学习不同的标签，标签的作用，标签的特点，属性，不同的属性的值的作用
  - 属性：更完善的显示标签的作用
    - 属性添加在标签上
    - 属性名 = ‘属性值’|“属性值” ，前后的引号一定要一致
    - 属性之间通过空格隔开
- 标签分类：
  - 单标签|自闭合标签：
  - 双标签|闭合标签：
元素分类：
- 行内元素：可以和其他元素同行显示
  - 不能设置宽高(css)
  - 宽度由内容撑起
  - 只能嵌套行内以及文本
- 块元素
  - 可以设置宽高
  - 嵌套其他的块元素，行内元素，文本…
  - 属性：align(对齐方式) --> left right center justify(两端对齐)

常用标签

head标签：用来描述页面的内容(定时跳转，引入css文件，引入JS文件)
- title标签：唯一一个能被用户看到的内容，显示为网页的标题(如果不输入内容默认显示地址信息)
body标签：用于显示页面中要呈现的内容
- 当一行文本中出现多个空格的时候，会将多个空格替换成一个空格
- 属性：
  - bgcolor：背景颜色
    - 颜色的英文单词
    - 6位16进制的颜色代码值：#XXXXXX
    - RGB三原色：RGB(255， 255， 255)
  - background：背景图片(平铺)
br：换行标签(单标签)
- 写几个标签就换几行
hr：水平分割线(单标签)
- 属性：color width align
a：超链接标签
- href：连接属性 – 必填属性
  - 绝对地址 http://www.baidu.com
  - 相对地址相对统一环境下
- title：当鼠标悬停在内容上显示的提示文字
- target：打开的方式
  - _blank 新标签页打开
  - _self 当前页面打开
- id：前端区分标签的唯一，id唯一不可重复，结合js使用
- 锚点：
  - a标签 href属性值 = “#+定点id值”
  - "#"后什么都不写回到页面顶部但不刷新
```
<a href="#bottom">去底部</a>
br*n
<a href="#">回到顶部</a>
<div id="bottom">底部</div>
```
p：段落标签
- p标签中的内容正常显示
- 前后存在换行
- 如果存在多个空格和换行只显示一个空格
- pre：保存原格式的段落标签
h*(h1-h6)：标题标签
- h1~h6 根据权重的大小，字体依次减小
- 自动加粗字体
div：块标签
- 内容为块元素
img：图片标签
- src：必填属性，定义图片的地址
  - 绝对地址 | 相对地址
  - 进入到某个文件路径：文件夹名字/…
  - 回到上一层路径：…/
- alt：图像无法正常显示时显示的提示文字
- title：当鼠标悬停在内容上显示的提示文字
- width：宽度，单位为像素px
- height：高度，单位为像素px
- align：对齐方式
  - 与周围同行元素垂直方向对其方式
    - top 顶部对齐
    - center 居中对齐
    - bottom 底部对齐
  - 水平方向与 css的浮动效果一致
    - left 对齐到这一行的左边
    - right 对齐到这一行的右边
b、i、u、del、strong、sup、sub：文本格式标签(不推荐使用)

列表标签

无序列表：ul
- type属性：定义列表项标记样式
  - desc 实心圆圈
  - circle 空心圆圈
  - square 实心方块
- li 定义列表项
有序列表：ol
- type属性：定义列表项标记序号
  - 1 a A i I
- li 定义列表项

自定义列表：dl

dt 自定义列表项

dd 对列表项的注释说明

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

ul，ol直接子元素只能为li，在li中可以定义所有的内容
列表可以相互嵌套
标签上的style属性中可以添加css样式
标签的属性是html语法规定，不是css

表格

展示整理数据的一种手段

属性

width 宽度
height 高度
border 边框
bordercolor 边框颜色
bgcolor 背景颜色
align 对其方式 left right center
cellspacing 单元格间距
colspan 跨列
rowspan 跨行
style=“border-collapse： collapse” 双线变单线

表单

表单——form，用来收集用户输入的数据

form

当我们点击提交按钮的时候，将表单中的数据开始提交到目标地址
当表单提交的时候，所属的所有表单域都会被提交
一次提交可以有多组请求参数
- 一组中包括
  - 请求参数： name(form表单的名称)
  - 请求参数的值：用户的输入/选择项
action：
- 本次表单数据将要提交的地址
method
- 本次表单提交的方式
- get：
  - 默认数据提交的方式，请求参数拼接到请求地址的后面发送
  - 会保留缓存信息
  - 请求参数数量有上限
- post：
  - 放在请求实体内容中发送，所以在地址栏看不到请求参数
  - 不保留缓存信息
  - 相对安全
enctype ：如果表单中有文件上传，就需要修改enctype的值multipart/form-data
表单域只有具有name属性之后，才会被提交
即使表单域什么值都不输入，只要有name属性，依然会以空字符串的方式进行提交
? | = | & | # 等符号有特殊含义，如果用户表单域的值为特殊符号或者汉字时，在提交的时候会被用urlencode编码格式进行转码，所以用户输入的特殊字符绝对不会干扰到URL地址
- http://tool.chinaz.com/tools/urlencode.aspx

表单域|表单标签

通用属性
- disabled：禁用
  - 首先不能编辑当前表单域，并且当前表单域不能被提交
- readonly：只读
  - 让当前表单域变成只读，但是数据可以照常提交
input：标签定义大部分表单标签
- type属性决定了表单域的类型，以下为常用的type属性值
- text：文本框
  - placeholder：占位符，不会真正的被提交，对当前输入框有一个提示作用
  - value：设置默认值，该值会被提交
  - size：输入框的长度
  - maxlength：可输入数据的数量
- password：密码框
  - 输入数据的时候，以*代替输入的字符
  - 密码框的使用和文本框的使用一模一样
  - 一般要给密码框设置一个确认密码
- radio：单选按钮
  - 一组单选按钮只能选择一个，名字相同即为一组。
  - 一般单选按钮的后面都有描述性的文字或者图片
  - 但是数据提交的时候，即使有name属性，但是只提交选中项
  - 提交的值为value值而不是描述文字或图片
  - 可以通过checked属性默认选中一项
- checkbox：复选框
  - 一组中可以选择多个，选中的值都会被提交
  - 可以通过checked属性默认选中一项
- file：上传文件
  - 但现在还不是真正的上传文件
  - value属性失效
- button：按钮
  - 首先它是一个可点击的表单域
  - 它的主要作用并不是为了收集数据，它的核心目的是为了触发事件
  - 事件绑定函数，函数就是我们最终要执行的操作
  - 一般情况不为按钮设置name属性
- submit：提交
  - 提交当前所属的表单
  - 表单会以method定义的方式将数据发送到action对应的地址
  - 表单提交时会收集当前表单域所有的值
- reset：重置
  - 将表单中所有的表单域返回到默认值状态
  - 一定要注意清空与重置的区别
  - 保护措施
    - 只需要用户输入最关键的数据，减少数据项
    - 当用户点击重置的时候给予确认框(JS)
- hidden：隐藏域
  - 将当前表单域隐藏，用户在页面上看不到对应的数据
  - 也说明当前表单域不需要用户的操作，一般需要程序员手动给其赋值
  - 将来表单提交的时候，数据也会被提交
select：下拉列表
- 下拉列表可以友好的替换掉数据项较多的单选或者复选按钮
- 默认替换掉的为单选按钮
- multiple属性可以代替复选按钮
- size在复选的情况下代表了展示备选项的数量
textarea：文本域
- 为了在页面中输入更多的文本，建议使用文本域，通过rows和cols设置文本域的宽和高
- 现行情况下，项目中一般引入功能更加强大的富文本编辑器
id，class，name，value之间的区别
- id：前台区分标签的唯一，id唯一不可重复，结合js使用
- class：属性值可以重复，结合css一起使用
- name：后台区分的唯一，发送数据给后台的表单元素必填属性
- value：标签的默认值

ノラガミ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML" 超文本标记语言"，英文全称是 HyperText Markup Language ，简称 HTMLHTML的构成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></he...
复制链接

扫一扫

HTML

HTML

HTML的构成

常用标签

列表标签

表格

标签

属性

表单

form

表单域|表单标签

“相关推荐”对你有帮助么？