2020-03-20 17:30发布
前端HTML基础知识学什么?初学HTML从基础知识入手,学习浏览器内核、HTML基本结构标签、HTML语法规范、VSCode编辑器、HTML常用标签、相对路径、锚点定位、表格、列表、表单等内容。
初学HTML从基础知识入手,学习浏览器内核、HTML基本结构标签、HTML语法规范、VSCode编辑器、HTML常用标签、相对路径、锚点定位、表格、列表、表单等内容。
1. 文件结构:
HTML文件的固定结构:
html是根标签
head定义文档头部,包含: title, script, style, link, meta
body是网页主要内容,包含:h1,h2-h6, p, a, img
2. 认识head标签:
style...
[removed]...[removed]
3. 语义化:
明白每个标签的用途(在什么情况下我可以使用这个标签才合理)
比如,网页上的文章的标题就可以用标题标签,
网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。
4. 认识body标签:
段落文本
斜体文本(强调) 斜体文本内容
粗体文本 粗体显示文本内容
单独样式文本 没有语义的,它的应用就是为了 设置单独的格式用的
引用的文本 引用的文本内容,会自动加上双引号
引用的文本
大段引用
换行
空格
代码内容 代码,通常是一行内
代码内容
多行代码
......
确定逻辑部分:逻辑部分是页面上相互关联的一组元素,如栏目版块
链接显示文本 链接标签
target="_blank" 网页将在新窗口中打开
mailto: 网页中邮件地址,可带多个参数
mailto: 邮箱地址
cc= 抄送地址
bcc= 密抄地址
; 多个邮箱地址
subject=邮件主题
body= 邮件内容
完整举例: 发送邮件
5. 与用户交互:
语法:
举例:
用户名:
密码:
表单控件:
文本框、文本域、按钮、单选框、复选框
method:
post/get
1. 文本框(文本/密码)
type:有“text”和“password”两种类型
name:为文本框命名,方便后台ASP和PHP使用
value:文本框默认值,一般起提示作用
2. 文本域(多行文本)
默认文本内容
cols:多行输入域的列数
rows:多行输入域的行数
3. 单选框、复选框
type:radio单选,checkbox复选框
value:提交数据到服务器的值,后台PHP处理使用
name:为控件命名,以备后台程序ASP和PHP使用
checked:checked="checked"时,此选项默认被选中
注意:同一组的单选按钮,name取值一定要一致
4. 下拉列表框
爱好:
看书
旅游
运动
购物
value:向服务器提交值
selected:设置selected="selected"时,默认选中
multiple:multiple="multiple"时,可以使用Ctrl多选,但很丑
label:为了改进鼠标易用性,鼠标点击文本时,选择上Radio
6. 认识CSS样式:
CSS:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式
选择符{ 属性: 值}
p{ color: blue}
选择符:又称选择器,指明要应用样式规则的元素,如、
、...><> 声明:指的是冒号”:“><> 多条声明:使用分号”;“隔开,最好每行都加上分号><> 注释:><>>><>><> ><> < style>这里文字是红色。
2. 嵌入式
较通用的一类,CSS样式放置在style标签中,而style通常要放置在
span{
color:blue;
font-size:12px;
}
3. 外部式
把CSS代码写到一个单独的外部文件中,以.css扩展名结尾,在
href: .css文件路径
rel和type: rel="stylesheet" type="text/css" 是固定写法,不能改
三种方法的优先级:
内联式 > 嵌入式 > 外部式
就近原则,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
8. CSS 类选择器
.类选器名称{css样式代码;}
.stress{
color:red;
注意:前边的小圆点是必须要有的
使用:
胆小如鼠
9. CSS ID选择器
#ID选择器名称{css样式代码}
#setGreen{color:green;}
区别:
起始于 '.' 与 '#'
调用时 class= 与 id=
ID选择器只能在文档中使用一次,类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式,而ID选择器是不可以的,如 三年级
10.CSS 子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。举例:
.food>li{border:1px solid red;}
若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素,举例:
.first span{border:1px solid red;}
11. CSS 通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素:
* {color: red;}
此时,所有元素的字体都为红色
12. CSS 伪类选择符
伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
此时,把鼠标放置到元素上边,颜色就会切换为红色
13. CSS 分组选择符
多个标签使用逗号隔开:
h1,span{color:red;}
相当于:
h1{color:red;}
span{color:red;}
14. CSS 继承
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代
如:
p{color:red;} /*可被span继承*/
p{border:1px solid red;} /*此时,span将不继承,边框显示红色*/
15. CSS 特殊性(权值)
权值:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
层叠:
相同权值时,最后一个将被应用
重要性:
相同权值时,使用 !important 将得到最高权重,如 p{color:red!important;}
样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,使用 !important 优先级比 用户自己设定 还高
16. CSS 文字排版
1. 字体
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}
2. 字号,颜色
body{font-size:12px;color:#666}
3. 粗体
p span{font-weight:bold;}
a{font-weight:bold;}
4. 斜体
p a{font-style:italic;}
p{font-style:italic;}
5. 下划线
p a{text-decoration:underline;}
6. 删除线
.oldPrice{text-decoration:line-through;}
7. 缩进
p{text-indent:2em;} /*2em 表示两倍文字大小*/
8. 行间距
p{line-height:1.5em;}
9. 字间距、字母间距
h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/
19.对齐
h1{text-align:center;} /*left、right和center*/
17. CSS 元素分类
块状元素:
、
、 内联元素: 、、、、、、、、、、 内联块状元素: 、<>><>>><> ><> ><> ><> ><> 注意:><> ><> ><> ><> ><> 注意:><> ><> ><> ><> 注意:><>>><>><> ><> ><> 相当于:><> ><> ><> ><> ><> }><> ><> ><> ><> ><> ><> ><> ><> ><> ><> ><> ><> ><> }><>>><>><> 元素有三种布局模型:><> ><> 网页在默认状态下的 ><> 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为><> 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示><> ><> 现在我们想让两个块状元素并排显示><> 任何元素在默认情况下是不能浮动的,但可以用><> 举例:><> #><> #><> ><> 就像是图像软件><> 层模型有三种形式:><> ><> 需要设置><> 然后使用><> 如果不存在这样的包含块,则相对于><> 举例:><> ><> ><> ><> ><> ><> }><> ><> ><> 相对定位完成的过程是首先按><> 然后相对于以前的位置移动,移动的方向和幅度由><> 举例:><> #><> ><> ><> ><> ><> ><> ><> } ><> < id> 3、固定定位(position: fixed) 如弹窗广告 fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身 它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响 举例: #div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } Relative与Absolute组合使用: 1、参照定位的元素必须是相对定位元素的前辈元素 相对参照元素进行定位 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了 #box2{ position:absolute; top:20px; left:30px; }20. 代码简写: 1. 盒模型: margin:10px; 相当于 margin:10px 10px 10px 10px; (上右下左顺序) margin:10px 40px; 相当于 margin:10px 40px 10px 40px; (上右 下左顺序) padding, border和 margin是一致的; 2. 颜色值: p{color:#000000;} 相当于 p{color: #000;} p{color: #336699;} 相当于 p{color: #369;} 3. 字体: body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; } 编写为: body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;} 注意: 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。21. 长度值 1. 像素 像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”) 2. em 假定 font-size设定 14px,那么 1em=14px 3. 百分比 p{font-size:12px;line-height:130%} 加载中... 相关问题推荐 【Web前端基础】HTML图片大小怎么设置HTML语法 HTML标签 2020-10-30 09:38 回答 13 html插入图片有两种方式:一种是通过标签插入的正常的图片,另一种是通过>< style>问题分析:1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话,可以通过自身的属性... 【Web前端基础】HTML文本格式化是什么意思HTML标签 HTML语法 2020-10-30 09:37 回答 6 就是以HTML的标准来格式编辑某个HTML的文件HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。下面有很多例子,您可以亲自试试:HTML 文本格式化实例文本格式化此例演示如何在一个 HTML 文件中对文本进行格式化预格式文本此例演示如何使用 pre 标签对空... 【Web前端基础】HTML文本框大小怎么设置HTML标签 HTML语法 2020-10-27 15:18 回答 9 inputname=type=textstyle=width:200px;height:20px; 【Web前端基础】html文本居中怎么设置HTML标签 HTML语法 2020-10-27 15:09 回答 7 html如何让文字居中显示通过设置左右margin值为auto来实现居中的。我们来看个例子就是专设置属div这个块状元素水平居中:html代码:div{border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/width:200px;margin:20pxauto;/*margin-left与margin-right... 没有解决我的问题,去提问 等你来答 现在的web开发的要求高吗? 120 个回答 相对定位和绝对定位的区别是什么呢 25 个回答 前端常用的框架有哪些? 89 个回答 热门问答 学习编程是不是就要多敲代码? 7 个回答 一般培训机构一个班大约多少人? 17 个回答 能独立开发小程序可以找到工作的吗? 12 个回答 前端和后端谁的发展更好? 37 个回答 Web学习,自学能力很差,用什么办法改善下? 51 个回答 Echarts优缺点? 4 个回答 微信小程序如何将数据进行本地存储并且如何获取 11 个回答 VsCode中TabNine插件怎么激活? 8 个回答 相关文章 前端开发的招聘注重学历吗?一份优秀的前端开发工程师简历是怎么样的? 0个评论 30岁学前端来得及吗?0基础学前端需要多久? 0个评论 前端开发的工作方向有哪些? 0个评论 前端开发适合女生吗?一般多久才能就业? 0个评论 2023年前端开发方向大厂招人和面试要求趋势 0个评论 2023年前端程序员值得学习的5个新技术 0个评论 所谓DNS污染和劫持是什么? 0个评论 normalize库 0个评论 ×关闭 采纳回答 向帮助了您的网友说句感谢的话吧! 非常感谢! 确 认 ×关闭 编辑标签 最多设置5个标签! HTML语法 保存 关闭 ×关闭 举报内容 检举类型 检举内容 检举用户 检举原因 广告推广 恶意灌水 回答内容与提问无关 抄袭答案 其他 检举说明(必填) 提交 关闭 × 打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮 × 付费偷看金额在0.1-10元之间 确定 ×关闭 您已邀请15人回答 查看邀请 擅长该话题的人 回答过该话题的人 我关注的人
内联元素:
、、、、、、、、、、
、、、
内联块状元素:
、<>><>>><> ><> ><> ><> ><> 注意:><> ><> ><> ><> ><> 注意:><> ><> ><> ><> 注意:><>>><>><> ><> ><> 相当于:><> ><> ><> ><> ><> }><> ><> ><> ><> ><> ><> ><> ><> ><> ><> ><> ><> ><> }><>>><>><> 元素有三种布局模型:><> ><> 网页在默认状态下的 ><> 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为><> 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示><> ><> 现在我们想让两个块状元素并排显示><> 任何元素在默认情况下是不能浮动的,但可以用><> 举例:><> #><> #><> ><> 就像是图像软件><> 层模型有三种形式:><> ><> 需要设置><> 然后使用><> 如果不存在这样的包含块,则相对于><> 举例:><> ><> ><> ><> ><> ><> }><> ><> ><> 相对定位完成的过程是首先按><> 然后相对于以前的位置移动,移动的方向和幅度由><> 举例:><> #><> ><> ><> ><> ><> ><> ><> } ><> < id>
3、固定定位(position: fixed) 如弹窗广告
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身
它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
Relative与Absolute组合使用:
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
#box1{
position:relative;
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了
#box2{
position:absolute;
top:20px;
left:30px;
20. 代码简写:
1. 盒模型:
margin:10px; 相当于 margin:10px 10px 10px 10px; (上右下左顺序)
margin:10px 40px; 相当于 margin:10px 40px 10px 40px; (上右 下左顺序)
padding, border和 margin是一致的;
2. 颜色值:
p{color:#000000;} 相当于 p{color: #000;}
p{color: #336699;} 相当于 p{color: #369;}
3. 字体:
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
line-height:1.5em;
font-family:"宋体",sans-serif;
编写为:
body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}
注意:
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
21. 长度值
1. 像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)
2. em
假定 font-size设定 14px,那么 1em=14px
3. 百分比
p{font-size:12px;line-height:130%}
html插入图片有两种方式:一种是通过标签插入的正常的图片,另一种是通过>< style>问题分析:1、首先你是通过第二种方式插入的是背景图片,直接用width和height只能控制div的宽度和高度。2、如果你插入的图片是通过标签的方式来插入的话,可以通过自身的属性...
就是以HTML的标准来格式编辑某个HTML的文件HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。下面有很多例子,您可以亲自试试:HTML 文本格式化实例文本格式化此例演示如何在一个 HTML 文件中对文本进行格式化预格式文本此例演示如何使用 pre 标签对空...
inputname=type=textstyle=width:200px;height:20px;
html如何让文字居中显示通过设置左右margin值为auto来实现居中的。我们来看个例子就是专设置属div这个块状元素水平居中:html代码:div{border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/width:200px;margin:20pxauto;/*margin-left与margin-right...
最多设置5个标签!
初学HTML从基础知识入手,学习浏览器内核、HTML基本结构标签、HTML语法规范、VSCode编辑器、HTML常用标签、相对路径、锚点定位、表格、列表、表单等内容。
1. 文件结构:
HTML文件的固定结构:
html是根标签
head定义文档头部,包含: title, script, style, link, meta
body是网页主要内容,包含:h1,h2-h6, p, a, img
2. 认识head标签:
style...
[removed]...[removed]
3. 语义化:
明白每个标签的用途(在什么情况下我可以使用这个标签才合理)
比如,网页上的文章的标题就可以用标题标签,
网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。
4. 认识body标签:
段落文本
有三段就放三个标题文本
h1-h6共6个标题分级斜体文本(强调) 斜体文本内容
粗体文本 粗体显示文本内容
单独样式文本 没有语义的,它的应用就是为了 设置单独的格式用的
换行
水平横线
空格
代码内容
代码,通常是一行内ul-li 列表信息,以圆点显示
- 信息1
- 信息2
......
ol-li 列表信息,带上序号
- 信息
- 信息
......
确定逻辑部分:逻辑部分是页面上相互关联的一组元素,如栏目版块
链接显示文本 链接标签
target="_blank" 网页将在新窗口中打开
mailto: 网页中邮件地址,可带多个参数
mailto: 邮箱地址
cc= 抄送地址
bcc= 密抄地址
; 多个邮箱地址
subject=邮件主题
body= 邮件内容
完整举例: 发送邮件
5. 与用户交互:
语法:
举例:
表单控件:
文本框、文本域、按钮、单选框、复选框
method:
post/get
1. 文本框(文本/密码)
type:有“text”和“password”两种类型
name:为文本框命名,方便后台ASP和PHP使用
value:文本框默认值,一般起提示作用
2. 文本域(多行文本)
cols:多行输入域的列数
rows:多行输入域的行数
3. 单选框、复选框
type:radio单选,checkbox复选框
value:提交数据到服务器的值,后台PHP处理使用
name:为控件命名,以备后台程序ASP和PHP使用
checked:checked="checked"时,此选项默认被选中
注意:同一组的单选按钮,name取值一定要一致
4. 下拉列表框
value:向服务器提交值
selected:设置selected="selected"时,默认选中
multiple:multiple="multiple"时,可以使用Ctrl多选,但很丑
label:为了改进鼠标易用性,鼠标点击文本时,选择上Radio
6. 认识CSS样式:
CSS:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式
语法:
选择符{ 属性: 值}
举例:
p{ color: blue}
选择符:又称选择器,指明要应用样式规则的元素,如、
、、
、...><> 声明:指的是冒号”:“><> 多条声明:使用分号”;“隔开,最好每行都加上分号><> 注释:><>>><>><> ><> < style>这里文字是红色。
2. 嵌入式
较通用的一类,CSS样式放置在style标签中,而style通常要放置在
内span{
color:blue;
font-size:12px;
}
3. 外部式
把CSS代码写到一个单独的外部文件中,以.css扩展名结尾,在
内使用标签引入,如:href: .css文件路径
rel和type: rel="stylesheet" type="text/css" 是固定写法,不能改
三种方法的优先级:
内联式 > 嵌入式 > 外部式
就近原则,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
8. CSS 类选择器
语法:
.类选器名称{css样式代码;}
举例:
.stress{
color:red;
}
注意:前边的小圆点是必须要有的
使用:
胆小如鼠
9. CSS ID选择器
语法:
#ID选择器名称{css样式代码}
举例:
#setGreen{color:green;}
胆小如鼠
区别:
起始于 '.' 与 '#'
调用时 class= 与 id=
ID选择器只能在文档中使用一次,类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式,而ID选择器是不可以的,如 三年级
10.CSS 子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。举例:
.food>li{border:1px solid red;}
若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素,举例:
.first span{border:1px solid red;}
11. CSS 通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素:
* {color: red;}
此时,所有元素的字体都为红色
12. CSS 伪类选择符
伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
此时,把鼠标放置到元素上边,颜色就会切换为红色
13. CSS 分组选择符
多个标签使用逗号隔开:
h1,span{color:red;}
相当于:
h1{color:red;}
span{color:red;}
14. CSS 继承
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代
如:
p{color:red;} /*可被span继承*/
p{border:1px solid red;} /*此时,span将不继承,边框显示红色*/
15. CSS 特殊性(权值)
权值:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
层叠:
相同权值时,最后一个将被应用
重要性:
相同权值时,使用 !important 将得到最高权重,如 p{color:red!important;}
样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,使用 !important 优先级比 用户自己设定 还高
16. CSS 文字排版
1. 字体
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}
2. 字号,颜色
body{font-size:12px;color:#666}
3. 粗体
p span{font-weight:bold;}
a{font-weight:bold;}
4. 斜体
p a{font-style:italic;}
p{font-style:italic;}
5. 下划线
p a{text-decoration:underline;}
6. 删除线
.oldPrice{text-decoration:line-through;}
7. 缩进
p{text-indent:2em;} /*2em 表示两倍文字大小*/
8. 行间距
p{line-height:1.5em;}
9. 字间距、字母间距
h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/
19.对齐
h1{text-align:center;} /*left、right和center*/
17. CSS 元素分类
块状元素:
、
...
、
、
、
、、、