HTML学习

Steven-Tan

已于 2022-03-06 19:32:32 修改

阅读量647

点赞数 3

文章标签： html css

于 2022-03-06 19:31:57 首次发布

本文链接：https://blog.csdn.net/m0_61826757/article/details/123315407

版权

1.HTML学习

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。——百度百科

1.web标准

主要由以下三个方面构成

结构：主要是网页元素，HTML，也是三者中最重要的

表现：主要是外观样式，CSS

行为：主要是交互，JavaScript

最佳体验方案：结构、样式、行为相分离，也就是写在不同的文件中

2.lang(语言)

'<html lang="en">'是英文网站(默认)

en为英文
zh-CN为中文

charset为字符集合，'<meta charset="UTF-8">'必须写，否则容易出现乱码

3.标签

根据语义，在合适地方给合理标签，让页面结构更清晰

标签分为2种：单标签、双标签

双标签关系：包含关系、并列关系

0.骨架标签

'<!DOCTYPE html>'处于最前面，为文档声明标签，采取html5显示页面

1.标题标签

'<h1>'-'<h6>',依据重要性递减

2.段落标签

'<p>'段落之间会插入一些垂直的间距

3.换行标签

'<br />'为单标签，break缩写，语义为强制换行

4.文本格式化标签

语义：突出重要性，比普通文字重要

加粗'<strong></strong>'或者'<b></b>'
倾斜'<em></em>'或者'<i></i>'
删除线'<del></del>'或者'<s></s>'
下划线'<ins></ins>'或者'<u></u>'

更推荐前一组，语义更强烈

5.无语义标签

主要用来布局

'<div>' 独占一行，division为分割，分区
'<span></span>',span为跨度，跨距，可以多占一行

6.图像标签

'<img src="URL"/>',image缩写，为图像

1.属性

src为必须属性，指定文件路径和文件名

图片必须和文件放在同一目录中

alt 替换文本，图片显示不出时
title 提示文本鼠标放在图像上会显示文字
width 设置宽度
height 设置高度

宽度和高度只修改其一即可，另一个会等比例缩放
border 设置边框

图形标签可以有多个属性，属性之间没有顺序，以空格分开，以键值对形式，key="value"

2.路径

相对路径

以引用文件为基础，图片相对页面位置
1. 同一级直接
2. 下一级 /
3. 上一级 ../
绝对路径

从盘符开始直达目标位置，一般只是自己使用 \

7.超链接标签

'<a>' 从一个页面到另一个页面

anchor缩写，为锚

href 指定url地址必须属性
target 指定打开窗口方式，默认当前位置_self打开 _blank新窗口打开

链接分类

外部链接：以"http://"开头
内部链接：内部页面之间的相互链接
空链接：#
下载链接：会下载文件或者压缩包
网页元素链接：
瞄点链接

快速定位到页面的某一位置

属性为#名字形式

目标标签 id="名字"

8.注释标签

''快捷键：Ctrl+/

主要是给程序员看的，更好的解释代码性能，并不显示页面

9.常见的特殊字符

空格：&nbsp 如果只是输出按空格显示只有一个

小于号：&lt

大于号：&gt

10.表格标签

作用：展示数据

'<table>'标签

1.表头标签

'<th>'加粗居中显示

2.表格属性(了解就行)

不常用，通过CSS设置，写在table里面

align left/right/center

border 1或""，默认为""

cellpading 内容和单元格之间距离默认1像素

cellspacing 单元格之间的空白默认2像素(最好设为0)

width/height 像素

3.表格结构标签

把表格分为头部和主体两大部分，更好的分清结果

'<thead>'头部，一般位于第一行

'<tbody>'主体

4.合并单元格

跨行合并：rowspan="个数"

跨列合并：colspan="个数"

目标单元格

跨行：最上侧

跨列：最左侧

11.列表标签

作用：布局，整齐、有序

无序列表

ul标签 li标签

无顺序，并列，ul里面只能有li

有序列表

有排列顺序

ol标签
自定义列表

解释术语或名词

dt带领多个dd

12.表单标签

收集用户信息，跟用户交互

完整的表单分为表单域、表单控件、提示信息3个部分

1.表单域

包含表单元素的区域

'<form>'标签

action="url地址" 接受并处理服务器程序

method="提交方式" get/post

name="名称" 区分同一页面多个表单域

2.表单控件

允许用户输入或者选择的内容控件

input输入

'<input type="属性值" />'

text 输入文本框

password 密码框、字符被掩码

radio 单选按钮、多选一、单选中必须有相同的名字

checkbox 复选框、可以多选

name 表单元素名字

value 元素的值，在文本框中能直接显示、给后台人员使用

checked="checked" 首次加载页面默认选中单选或者复选按钮

maxlength 输入的最多字符

button 可点击按钮(通过js结合启动脚本)

file 选择上传文件
'<label>'标签

光标自动转到增加用户体验

for属性元素与id相对应
select下拉表单

有多个选择，节约页面空间，至少包含一对option

定义默认选中项，selected="selected"

option选项
textarea文本域

输入内容较多时、不能使用文本框、常见于留言板、评论