html笔记

it2023-07-09  85

HTML

web标准

结构

html

表现

css

行为

JavaScript

web标准好处

让web发展前景更广阔

内容能被更广泛的设备访问

更容易被搜寻引擎搜索

降低网站流量费用

使网站更易于维护

提高页面浏览速度

骨架其它内容

<!doctype html>

文档类型浏览器按照HTML5规范解析页面

lang

页面语言

指定语言种类

en 英文

zh-CN 中文

字符集

gb2312简单中文

BIG5 繁体中文

GBK 全部中文字符

UTF-8 全世界所有国家需要用到的字符

标准格式不写容易乱码HTML文件是以UTF-8编码保存的,浏览器根据编码去解码对应的html内容

浏览器内核(渲染引擎)

IE

Trident

firefox

Gecko

Safari

webkit

手机浏览器内核Android、ios

chrome

Chromium

Blink(二次开发)

webkit分支

opera

Blink

初识html

超文本标记语言

超越文本限制超级链接文本

主要学习html标签

html标签来描述网页元素所有html标签都用<>表示

骨架标签

根标签页面中最大的标签 文档头部必须在其中设置标签 网页标题 文档主体

标签分类

常规元素(双标签)

开始标签结束标签/ 关闭符 内容

空元素(单标签)

<标签名 />

标签关系(双标签)

嵌套关系

中包含

并列关系

标签的语义化(含义)

根据标签语义,合适地方给最合理标签,使结构更清晰

方便代码的阅读和维护子主题 让浏览器或是网络爬虫很好解析,更好分析内容2会具有更好的搜索引擎优化

扩展阅读

锚点定位

创建锚点链接,快速定位目标内容1.使用相应的id名标注跳转目标的位置(找目标)

2.使用链接文本

base标签

整体链接打开状态一般写在之前

pre标签

不好控制,不常用。预先写好的文字格式显示页面,保留空格和换行

特殊字符

空格符   大于 > 小于 <以运算符&开头,以分号运算符;结尾不是标签,是符号

html常用标签

排版标签

标题h、段落p、水平线hr/、换行br/、

div span(没有语义,盒子,装网页元素,用来布局)

一行只能放一个div一行可以放很多span

文本格式化标签(熟记)

粗体 、斜体 、加删除线、下划线后者强调 xhtml推荐后者

标签属性

<标签名 属性1=“属性值1” 属性2=“属性值2” …>内容 </标签名>标签可以有多个属性,必须写在开始标签的标签名后面属性之间不分先后顺序,标签名与属性、属性与属性之间均已空格分开采取 键值对 的格式 key=“value” 的格式

图像标签img/

src URL 图像路径 必须属性alt 文本 图像不能显示时的替换文本title 文本 鼠标悬停时显示的内容width 像素 xhtml不支持页面百分比 宽height 像素 xhtml不支持页面百分比 高border 数字 设置图像边框宽度

链接标签

文本或图像

href 必须写

target 打开方式

默认 _self 当前窗口打开_blank 新窗口打开

外部链接 需要添加 http://

内部链接 直接链接内部页面名称

没有确定目标 空链接 href="#"

网页中各种元素都能添加超链接

注释标签

给人看,解释代码

快捷键ctrl+?

ctrl+shift+/

表格table

用来展示大量的表格式数据

目标:1.能熟练写出n行n列表格2.能简单合并单元格

构成

表格 定义一个表格标签 表格标题 居中显示于表格之上必须紧随table标签之后只在表格里面有意义 行 定义表格中的行,必须嵌套在table标签中里面只能嵌套td类单元格 单元格 定义表格中的单元格,必须嵌套在tr标签中用于存储数据容器,可以容纳所有元素 表头单元格标签 文本加粗居中

无列标签

表格属性

border 边框

默认0无边框

width、height

align在网页中的对齐方式

left、center、right

cellspacing

单元格与单元格边框之间的空白间距(外间距)

默认2像素

一般为0

cellpadding

单元格内容与单元格边框之间的空白间距(内间距)默认1像素

三参为0

cellpadding

cellspacing

border

合并单元格

两种方式

跨行合并rowspan=“合并单元格的个数”跨列合并colspan=“合并单元格的个数”

顺序

先确定跨行合并还是跨列合并根据 先上后下 先左后右寻找目标单元格,再写合并方式和合并数量删除多余单元格

扩展(表格结构划分)

thead题头

用于定义表格头,存放标题。内部必须有tr标签

tbody正文

用于定义表格主体,放数据本体

tfoot脚注

放表格的脚注

以上都放到table标签中

路径(重难点)

目录文件夹

存放做页面所需要素材

第一层(根目录)

会有images存放图像文件

相对路径

同级

引用时,直接写图像名

下级

通过 / 找

上级

通过 …/甚至…/…/等返回到HTML文件的所在的上一级文件,即返回到和图片文件所在的同级目录

指相对于写的html文件出发,图片所处的位置

绝对路径

换电脑不一定用,不提倡使用

本地 \网络下一级 /

绝对的网络地址

不另存为,复制图片网络地址,直接引用

列表

用来布局

分类

无序列表 ul(重点)

ul中只能嵌套lili标签之间是容器,可以容纳所有元素无序列表会带有自己样式属性,放下样式,让css来产品链接

有序列表 ol(了解)

金牌榜

自定义列表(理解)

dl

dt

dd

底部导航栏

地区

表单

用来收集用户信息

目标:写出最常用的注册类表单,说出input表单常见属性

构成

表单控件

提示信息

form表单域

用户信息的收集和传递

表单标签(掌握)

input控件(重点)

单标签

type属性设置不同属性值指定不同控件类型

常用属性

type

text单行文本输入框、password密码输入框、radio单选按钮、checkbox复选框、button普通按钮、submit提交按钮、reset重置按钮、image图像形式的提交按钮(src必须有)、file文件域子主题 2

name

用户自定义

控件名称

表单名字,后台可以通过name属性找到表单,区别不同表单

value

用户自定义

input控件中的默认文本值

默认的文本值

单选框radio和复选框checkbox

name=”xxx“

name有相同名字

checked

checked

name有相同名字默认选中状态

size

正整数

input控件在页面中的显示宽度

maxiength

正整数

控件允许输入的最多字符数

label标签(理解)

提高用户体验

作用:用于绑定一个表单元素,当点击label标签时,被绑定的表单元素就会获得输入焦点。点击label标签里面的文字时,光标会定位到指定的表单里面

绑定元素

用label直接包括input表单

用户名:</label

for id 控制

textarea控件(文本域)

多行文本输入

文本内容。实际用css控制宽高

select下拉菜单

节约空间

select

select中至少包含一对option

option中定义select=“selected”,表示默认选中项

实际使用少,用div模拟多

XMind: ZEN - Trial Version

最新回复(0)