HTML是什么
HTML语法学习
HTML表格标签学习
HTML表单标签学习
大名：HyperText Markup language
寓意：超文本 标记 语言
超文本 标记 语言
出名：HTML4.01 & HTML5
主要形式：。htm,.html
标记、标签、元素、节点
HTML关于文档声明怎么理解
W3C 标准文档的提出者 发布者 维护者
浏览器厂商 实现者
兼容性
HTML5
文档结构组成
闭合的标签
首行声明 一包两断
元素
1、元素/标签/节点
2、元素顺序
3、元素的属性
4、标题、段落、链接、图像、列表、块
5、块级元素与行内元素
6、格式化和注释
HTML 初识元素/标签
HTML 初识元素/标签
<开始标签 […属性]>标签内容<结束标签>
<标签名>标签内容</标签名>
例子：
例外： input输入框
？ 换行
注意：属性只能在开始标签中定义
HTML结构元素的顺序
结构性元素 首行声明 一包两段
html文档结构
文档版本声明Html标签
head
metatitlelinkstylescript body
可以包含style、script其他语义化标签
HTML属性
属：给予元素基本标识
性：样式 或 描述元素特征
通用属性/全局属性
能够在所有的标签中使用，id,class,style就这些吗？no but……其他的厂商支持性不好 比如conteneditable 鼠标点上去编辑元素
特有属性
colspan,type,value……
HTML 标签、段落、链接、图像、列表、div
是不是有点土？
放到现在来讲 这叫做 语义化
“更古” 语义化标签 和 “现代”语义化标签
比较现代的 section、article、footer、header
HTML的语法 标签
HTML 标题 Heading Content
标签
共有6级
作用 浏览器会自动给你附加标题样式（然而我们不想要…css改）
搜索引擎或者阅读器能够根据标题来识别 生成文档大纲
问：为什么只有6级呢？附加的样式？用的多吗？
HTML标题 Heading Content
标识 、标题标签
浏览器的附加样式加粗、字号变大 不想要的 手动干预
为什么只有六级呢
六级够用 、一级32px（像素） 长度单位
很多浏览器最小到12px的
按F12打开浏览器的控制台
选择元素 查看样式
em 一般em:px 1:16 h3 1.17 18.72差不多
user agent stylesheet 浏览器给的样式（不会想要浏览器的样式 我们会覆盖掉的）
一到6级标题
HTML 段落 paragraph
标签
段落内容
作用 划分段落
注意：默认浏览器样式 空标签也是“占地方”的，段落的出场率很高
paragraph
一段一段的
独自占一段的
外边距 空标签也占地方的
例子
浏览器潜在风险 默认样式
出场率很高
HTML 字体 font
标签
作用：格式化文本
注意：（1）只能控制字体集（Helvetica，Arial）、大小和颜色
（2）别用！别用！别用！
格式化
字体集
font 在 HTML5 过时的、没有意义的标签 别用
没有了font标签那怎么定义文字内容样式呢？CSS使用font属性。
链接
标签
作用 文档内部锚点、跳转到外部文档、下载资源
属性 href,target
怎么禁止跳转呢？
去掉下划线呢？text-decoration: none;
href 跳到哪里
target _blank新标签新窗口打开 _self当前文档窗口打开
锚点
id 标签通用属性 唯一标识
我要跳转页面 titleThird区
死链接
去掉下划线 链接丑爆了
cursor:none; 小手
伪类 visited
图像
标签
作用 插入图像
属性 src,alt
贴士（1）支持格式：PNG/JPEG/GIF/PDF
（2）非标签方式：background
富文本 超文本 图片
单对的标签
src alt
alt 图片无法正常显示 给提示
引入PDF必需是单页的
非标签方式：background
class：标识，用来指定标签的类名
路径-资源你在哪里？
绝对路径相对路径
经常用相对路径的
注意：如果是Windows系统，绝对路径是从盘符开始的，如C盘html文件夹下的index.html文件，路径应显示为C:\html\logo.webp
麻烦
还是相对路径好呀
下一级
上一级
向上来一层
列表
标签
作用 插入无序、有序、定义列表
提示（1）type属性项目符号样式（disc,circle,square）不建议使用！
（2）只用>就好了
order
ul无序
ol有序
disc circle square
标签
作用 布局
提示：非常非常常用且重要 现代布局都靠它
万能标签 都靠它了
非常超级无敌非常好用的
大神
无语义的标签
非常常用且重要 现代布局都靠它
开发一个网站 使用div 频繁
内容不知道什么 包裹 那就用div吧
HTML 块级元素与行内元素
1、如何理解块级和行内呢？看定义再看例子
2、哪些是呢？我可不想干记忆哦！
格式化上下文
Block formatting contexts
垂直
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
Inline formatting contexts
An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
水平
块级元素 占满一行 上下挨着
行内元素 水平挨着 没意义 包起来
块级元素 布局
行内元素 包裹内部 取决于内容
表格是个块 里面单元格不是
HTML注释
1、行注释
2、段落注释
3、条件注释 兼容性检查必备
行注释
段落注释
条件注释标签只在IE10以下版本中的浏览器中生效的
HTML常用带格式作用的标签
1、文本格式化
一般不使用的
2、预格式文本
代码 开发者不使用的
CSS
3、引用
4、删除线
都是兼容性不好 一般使用CSS
标签
作用 布局，呈现需要表格布局的内容
贴士 表格标签是块级元素 表格样式
HTML表格
重要知识点
边框问题 border
单元格间距 cellspacing
单元格边距 cellpadding
单元格跨行 rowspan
单元格跨列 colspan
内容对齐 align
HTML表单
标签
作用：收集用户输入的内容（文本、文件）
属性 action 提交到的服务端地址
method：指定提交时用哪种HTTP方式：POST/GET
name:标识
autocomplete：浏览器是否可以自动填充
enctype:指定表单内容编码
重要表单元素
input 文本、密码、单选、多选、按钮、数字、日期、颜色、范围、邮件、URL、文件
select
textarea
button
HTML
。html/.htm
认识HTML结构
首行声明 一包两段 html
headbody
认识标签
<标签名 属性>标签内容</标签名>
段落
<标签 属性/值>
认识语法
标签顺序标签闭合标签属性
基础标签 标题、图片、链接、段落等
块级元素及行内元素
重点标签
表格表单
绝对路径与相对路径
网页搭建入门之HTML与CSS之HTML入门
|
