- 什么是HTML5?
h5指HTML5。是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 通俗的讲，H5是一个网页，就像一个很大的容器，里面可以放文本、图片、音视频等基本的流媒体格式的文件。HTML的第五个版本是HTML css js总称
- HTML能做什么?
网页开发 小程序 公众号 移动开发 Hydrid App(混合应用开发) Native App(原生应用开发) 电脑软件 游戏开发 后端开发(学到nodejs 可实现后端开发) - 项目开发流程！ 产品经理 原型图 需求文档prd UI设计 效果图 标注图 前端开发 后端开发 接口文档 测试 性能测试
-
网页的组成部分
HTML结构
w3c制定了结构HTML的语法，标准
css表现
w3c制定了结构HTML的语法，标准
js行为
ECMA制定了行为标准（DOM,ECMAScript）
html的结构
ctrl+!/html选择5,快速生成框架
<!DOCTYPE html>声明文档类型是html
html:hyper text markup language 超文本标记语言
mate设置转码格式UTF-8
title设置网页标题
base设置网页打开方式
base target:_self/_blank
body页面内容
HTML常用标签
HTML语法
常规标记，双标记
<标记 属性=“属性值” 属性=“属性值”>
空标记,单标记
<标记 属性=“属性值” 属性=“属性值”>
标签
单标签
<br>换行 <hr>换行线
<img src="路径" title="鼠标悬停文本 alt="加载失败时显示的内容" width="宽度" height="高度">插入图片
双标签
h1~h6标题 p段落 center居中 em/i倾斜 strong/b加粗 del/s删除线 u下划线 sup上标 sup下标
<a href="链接" tittle="鼠标悬停文本" target="_blank新页面打开/_self本页面打开">
特殊标签
空格 <小于号 >大于号 ©版权 ®注册 ™商标
列表
a.无序列表<ul><li><li></ul>
属性
type
disc实心圆 默认
circle空心圆
square方块
none无
b.有序列表<ol><li><li></ol>
属性
type
1;A;a;I
start
c.自定义列表<dl><dt>被解释的主体</dt><dd>解释的内容</dd><dl>
图片的路径
相对路径
从当前文档位置出发一步步找到图片位置
绝对路径
类似于桌面快捷方式的路径或是网址
表单form
应用场景：登录注册页面
作用：收集用户信息
创建表单
<form method="方式方法" action="定义提交的目的地"></form>
method="get/post"
method="get"
是默认值
get是获取数据
get是在数据传送的过程中,用户可以在url地址栏看到过程
get安全性比较低,但是效率比较高
method="post"
post是传送数据
post是在数据传送的过程中,用户可以在url地址栏看不到过程
post安全性比较高
组成
表单域<form></form>
表单控件
文本框<input type="text">
密码框<input type="password>
普通按钮<input type="button" value="按钮名称">
提交按钮<input type="submit"或<button></button>
重置按钮<input type="reset"
图片按钮<input type="image“ src="图片路径"
列表属性
value 初始值
name 命名，提交后台用
placeholder 未输入信息时显示的内容
CSS初识
CSS定义：层叠样式表,用于修饰页面
CSS的三种引入方式
a.行内样式 <p style=""></p>
b.内部样式 <head><style>目标内容{属性:"属性值"}</style></head>
c.外部样式 新建一个CSS文件路径为"#" <head><link rel="stylesheet" href="#"></head>或<head><style>@inportant url(#)</style></head>
CSS常用的一些修饰属性
宽度 width:;
高度 height:;
背景颜色
background-color
简写 background
字体颜色
color
文字大小
font-size
css层叠性的体现
根据选择器权重的不同进行覆盖
选择器相同:后来者居上
选择器不同:高权重覆盖低权重
CSS选择器
基本选择器
类型选择器
class选择器
id选择器
通配符
使用场景:
想要简化代码且是想要所有的标签执行样式
语法
*{}
权重是0000
群组选择器
使用场景:
想要简化代码且需要某些标签执行一样的样式
语法:
某某1,某某2,某某3{}
整体没有权重的说法,单独的看自己的权重
层次选择器
针对包含结构
后代选择器(包含选择器)
使用场景:
想要修饰某个父元素下面所有的子元素的时候,子元素指的是所有的后代(儿子,孙子,重孙.....)
语法:
父元素 子元素{}
权重是算和
子选择器
使用场景:
想要修饰某个父元素下面所有的儿子元素
语法:
父元素>子元素{}
权重是算和
针对并列结构
相邻兄弟选择器
使用场景:
想要修饰某个元素后面紧挨着的元素
语法:
某某1+某某2{}
权重是算和
通用兄弟选择器
使用场景:
想要修饰某个元素后面所有的元素
语法:
父元素~子元素{}
权重是算和
CSS属性
浮动属性
使用场景
想要竖着的横着排列的时候用
想要实现文本环绕效果的时候应用
语法
float:left;
向左浮动
float:right;
向右浮动
float:none;
默认值
注意点
一个盒子浮动了之后,该盒子是飘起来的,脱离文档流,不占位置
一个盒子浮动了之后,下面如果是没有浮动的盒子,那么这个盒子会上去,且里面内容会环绕显示
多个盒子同时浮动,会横着排列
同时左浮动,从左往右
同时右浮动,从右往左
在包含结构里面,如果父元素没有设置高度,所有的子元素浮动了,此时父元素的高度是0,这个现象叫做高度塌陷
想要不高度塌陷,解决方法
给父元素设置高度
最简单的方法
给父元素设置overflow:hidden;
清除浮动属性
使用场景:
设置浮动之后的排版效果
只是改变页面的排列方式
如果盒子本身是浮动的,清除浮动之后,还是飘着的
如果盒子本身不是浮动,清除浮动之后,就还是不飘着
语法
clear:none;
默认值
clear:left;
clear:right;
clear:both;
常用的
注意点
清除浮动给的是自己,谁需要清除就给谁,只能影响自己
清除浮动之后只是改变排列方式
clear里面在书写属性值的时候,要看前面的盒子是什么浮动,clear就写什么属性值
外间距属性
使用场景
想要设置间距,且间距对于盒子来说是外面的时候用
用法
单独设置
margin-top
外上
margin-bottom
外下
margin-left
外左
margin-right
外右
简写
margin:20px;
表示的是4个方向都是20
margin:20px 40px;
上下都是20
左右都是40
margin:20px 40px 80px;
上是20
左右都是40px
下是80
margin:20px 40px 80px 120px;
上是20
右是40px
下是80
左是120
注意点
margin-top的传递问题
触发条件
得是包含结构里面,如果子元素给了margin-top,应该是子元素自己下来,但是父元素也会一起下来
解决方法:
给父元素添加overflow:hidden;
给子元素或者父元素添加浮动
给父元素添加border-top:1px solid transparent(透明色);
内边距属性
使用场景
想要设置间距,且间距对于盒子来说是里面的时候用
用法
单独设置
padding-top
内上
padding-bottom
内下
padding-left
内左
padding-right
内右
简写
padding:20px;
表示的是4个方向都是20
padding:20px 40px;
上下都是20
左右都是40
padding:20px 40px 80px;
上是20
左右都是40
下是80
padding:20px 40px 80px 120px;
上是20
右是40
下是80
左是120
注意点
padding撑大盒子的问题
解决方法:
给盒子添加怪异盒属性box-sizing:border-box
原宽高减去添加的内边距
内外边距的相同与不同
相同点
都可以设置间距,都有上下左右分开的写法跟复合写法
不同点
margin设置的是外间距,padding设置的是内间距
margin不会把盒子撑大,padding会把自己撑大
margin的属性值支持负数跟auto,而padding都不支持
margin会产生margin-top的传递问题,而padding不会
边框属性
使用场景
需要给盒子设置边框
用法
单独设置
border-top
上边框
border-bottom
下边框
border-left
左边框
border-right
右边框
简写
border:1px solid red
width/style/color color可以不写,默认为黑色
border-width:从上开始顺时针
border-style:从上开始顺时针
solid实线,dashed虚线,dotted点线,double双实线
border-color:从上开始顺时针
transparent透明色
0
点赞
收藏
分享 
微信扫一扫
什么是HTML5? HTML入门标签
相关推荐
0 条评论