哪个网站支持接单做网页的,网络营销策划方案结论,网页图片无法另存为,代理公司注册需要多少钱Html5 CSS3
一、概念
1.什么是html5 html: Hyper Text Markup Language ( 超文本标记语言) 文本#xff1a;记事本
超文本#xff1a; 文字、图片、音频、视频、动画等等#xff08;网页#xff09; html语言经过浏览器的编译显示成超文本 开发者使用5种浏览器#xf…Html5 CSS3
一、概念
1.什么是html5 html: Hyper Text Markup Language ( 超文本标记语言) 文本记事本
超文本 文字、图片、音频、视频、动画等等网页 html语言经过浏览器的编译显示成超文本 开发者使用5种浏览器拥有不同的内核 edge谷歌firefoxsafari, 欧朋浏览器 国内目前的浏览器用的还是google的内核 谷歌性能最好v8引擎解析速度高 2.什么是css3 css: Cascading Style Sheet ( 级联样式表) 作用美化网页 3.w3c标准 w3c World Wide Web Consortium 万维网联盟 成立于1994 年web技术领域最权威最具有影响力的国际中立性技术标准机构 官网https://www.w3.org/
W3C标准包括
结构化标准化语言HTML、XML表现标准语言css行为标准javaScript — DOM、ECMAScript
4.前端学什么
结构化标准化语言HTML、XML骨架表现标准语言css皮囊行为标准javaScript — DOM、ECMAScript动画 交互
二、开发工具
VSCode官网
三、html和css的语法
1.基本语法
1.1html的语法
在vscode 直接打html就会自动给出基本格式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html1.2html的标签
1. 标签的基本结构
HTML标签通常由尖括号和包围的关键词构成如html。大多数HTML标签是成对出现的称为双标签。例如html和/html分别作为HTML文档的开始和结束标签。第一个标签是开始标签第二个标签是结束标签它们之间的内容构成了标签的主体。有些特殊的标签是单个标签称为单标签或自闭合标签例如br /用于换行它不需要结束标签。
2. 标签的分类
HTML标签可以根据其功能分为不同的类型包括但不限于以下几种
结构标签用于定义HTML文档的整体结构如html、head、body等。文本格式化标签用于改变文本的显示方式如h1到h6用于定义六级标题p用于定义段落br /用于换行等。链接标签用于创建超链接如a hrefURL链接文本/a。图像标签用于在HTML页面中嵌入图像如img src图像URL alt图像描述 /。列表标签用于创建列表包括无序列表ul和有序列表ol以及列表项li。表格标签用于创建表格包括table、tr表格行、th表头单元格、td表格单元格等。表单标签用于创建表单收集用户输入包括form、input、textarea、select等。布局标签如div和span用于布局和样式控制。div是块级元素通常用于布局span是行内元素用于对文本的某部分进行样式控制。
1.3css的语法
选择器 {声明1;声明2;
}
如
h1 {font-size: 50px;color: red
}1.4 入门代码
!DOCTYPE html
html langen !-- 设置语言为英语 --
headmeta charsetUTF-8 !-- 设置网页编码格式 UTF-8是国际编码支持各种语言 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 使页面在手机上自适应 -- title02css基本语法/titlestyleh1 {font-size: 50px; /*font字体 font-size字体大小 px为像素*/font-family: 宋体; /*字体类型*/font-weight:bold; /*字体粗细 bold:就是600*/font-style:normal; /*italic:斜体*/color: #00f; /*颜色可以三种表示方式英文 red、pink rgb(250,0,0) 十六进制: #000000两位表示但是两位相同可以用一位简写 如#00f */}/style
/head
bodyh1我爱中国/h1h2我爱中国/h2h3我爱中国/h3h4我爱中国/h4h5我爱中国/h5h6我爱中国/h6我爱世界
/body
/html经验css的最后一条声明的“”是可以不写的但是W3C规范建议最后一条声明的结束也要把“”写上 h1为标题标签 数字越大字号越小,占据了一整行 html中的注释格式为 css中的注释格式为/* */ 2.html种引入CSS样式
三种引入方式
行内样式内部样式表外部样式表
2.1 行内样式 样式写在标签里面 示例代码 h1 stylecolor: red;font-size: 50px;行内样式/h1
h1 stylecolor: red;行内样式/h12.2 内部样式表
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {color: red;}/style
/head
bodyh1标题1/h1h1标题1/h1
/htmlcss语言写在style标签里但还是在代码内部 优点 方便在同一个页面种修改样式 缺点 不利于多页面之间共享复用代码及维护对内容于样式的分离不够彻底
2.3 外部样式表
css代码全部保存在扩展名为.css的样式中
HTML文件引用扩展名为.css样式表有两种方式: 链接式 语法
headlink hrefcss/style.css relstylesheet typetext/css /
/headhref:文件路径
rel:使用外部样式表固定写法stylesheet
type:文件类型 (不是必须的)案例
common.css存放以下css代码h1 {font-size: 200px;color: red;
}---------------------------------------------------------------------------------------------!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title05外部样式表-链接式/title!-- 相对路径/绝对路径,推荐使用相对路径./ 表示当前文件夹 ../表示上一级文件夹 --link relstylesheet href./css/common.css /
/head
bodyh1Hello 外部样式-链接式/h1
/body
/html导入式 # 语法
headstyle!--import url(css的地址)--/style
/head 案例!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title06外部样式表-导入式/titlestyle typetext/css!-- import url(./css/common.css); --/style
/head
bodyh1坤坤爱篮球/h1
/body
/html链接式和导入式的区别 标签是属于XHTMLimport是属于css2.1版本落后 使用链接的css文件先加载到网页种再进行编译显示。而import导入的css文件客户端先显示HTML结构再把css文件加载到网页中。link不会因为网速慢先加载出未经美化的超文本import是属于CSS2.1特有的对不兼容CSS2.1的浏览器是无效的 现在基本不使用导入式
3.CSS样式优先级
遵从如下原则
行内样式 内部样式表 外部样式表就近原则
代码示例
h1 {font-size: 50px;color: red;
}!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title07css样式优先级/titlelink relstylesheet href./css/style.css 外部演示表的样式style 内部样式表的样式h1 {color: blue;}h2 {color: red;}h2 {color: blue;}/style
/head
bodyh1 stylecolor: green;北京欢迎你/h1 行内样式表的样式h2武汉欢迎你/h2
/body
/html如果有多个相同的样式最后一个会覆盖前面的不相同的样式会叠加 4.CSS基本选择器
4.1 标签选择器
语法
标签名 {属性值;
}如
h1 {font-size: 20px;
}案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {font-size: 16px;color: red;}/style
/head
bodyp2024年6月份全国居民消费价格同比上涨0.2%。其中城市上涨0.2%农村上涨0.4%食品价格下降2.1%非食品价格上涨0.8%消费品价格下降0.1%服务价格上涨0.7%。1—6月平均全国居民消费价格比上年同期上涨0.1%。/p
/body
/html4.2 类选择器
语法
style.类名 {属性:值;}
/style标签名 class类名/标签名案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title09类选择器/titlestyle.mycolor{color: blue;}.mysize {font-size: 50px;}/style
/head
body!-- 语法如果有多个类选择器可以在后面空格继续加 --p classmycolor mysize我爱编程/pfont classmycolorHello/font
/body
/html作用可以多次使用 4.3 ID选择器
语法
style#id选择器名称 {属性:值;}
/style标签名 idid选择器名称/标签名案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 不要以数字开头 */#first {font-size: 50px;}/style
/head
bodyp idfirst北京欢迎你/p
/body
/html标签选择器直接应用于html标签类选择器可以在页面中多次使用id选择器在同一个页面中只能使用一次 。实际上可以用多次但是为了确保唯一性制定出来的规范 4.4 优先级 ID选择器 类选择器 标签选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title11选择器的优先级/titlestyle/* 类选择器 */.blueColor {color: blue;}/* 标签选择器 */p {color: green;}/* id选择器 */#colorPink{color: pink;}/style
/head
bodyp classblueColor idcolorPink我爱编程/p
/body
/html5. CSS的高级选择器
层次选择器结构伪类选择器属性选择器
5.1 层次选择器
选择器类型功能描述E F后代选择器选择匹配的F元素且匹配的F元素包含在匹配的E元素内EF子选择器选择匹配的F元素且匹配的F元素是匹配的E元素的子元素EF相邻兄弟选择器选择匹配的F元素且匹配的F元素紧位于匹配的E元素后面E~F通用兄弟选择器选择匹配的F元素且位于匹配的E元素后的所有匹配的F元素
前两个可能有用
后代选择器案例:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep font {color: red;}/style
/head
body!-- 儿孙后代 --p我爱中国,font我span爱/span世界/font/pfont我爱编程/font
/body
/html子选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 子选择器 */pspan {color: red;}/style
/head
body!-- 儿孙后代 --p我爱中国,font我span爱/span世界/font/pp我爱编程,span我爱html/span/p
/body
/html、
相邻兄弟选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyledivp{color: blue;}/style
/head
bodydiv我爱编程p我爱世界/pspan我爱湖北/span/divp我爱世界/pp我爱世界22/p
/body
/html通用兄弟选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv~p {color: red;}/style
/head
bodydiv我爱中国 p我爱世界/p/divp我爱编程/pp我爱学习/p
/body
/html5.2 结构伪类选择器
E:first-child作为E的第一个子元素E:last-child作为最后一个子元素E:nth-child(n)第n个子元素E:first-of-type选择父元素内具有指定类型的第一个E元素E:last-of-typeE F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素
前三个够了
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title16结构伪类选择器/titlestyle/*给第一个li设置颜色为红色*/ul li:first-child {color: red;}/*给li中的最后一个设置颜色为蓝色*/ul li:last-child {color: blue;}/*给中间第二个孩子设置颜色为绿色*/ul li:nth-child(2){color: green;}/*给第2个p设置字体大小为50px*/p:nth-child(2) {font-size: 50px;}/style
/head
bodypp1/ppp2/ppp3/pullili1/lilili2/lilili3/li/ul
/body
/html5.3 属性选择器
属性选择器功能描述E[attr]选择匹配具有属性attr的E元素E[attrval]选择匹配具有属性attr的E元素且属性为valE[attr^val]选择匹配元素E且E元素定义了属性attr其属性值以val开头的任意字符串E[attr$val]选择匹配元素E且E元素定义了属性attr其属性值以val结尾的任意字符串E[attr*val]只要包含了val的任意字符串
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title17属性选择器/titlestyle.demo a {width: 50px;height: 50px;}a[id] {background-color: yellow;}a[idgreen] {background-color: green;}a[idblue] {background-color: blue;}a[idyellow] {background-color: yellow;}a[href^http] {background-color: pink;}a[href$cn] {background-color: black;}a[href*ba] {font-size: 50px;}/style
/head
bodyp classdemoa hrefhttp://www.baidu.com target_self idgreen百度/aa href#京东/aa hrefhttp://www.alibaba.cn阿里/aa hrefhttps://www.thepaper.cn澎湃/a/p/body
/html四、总结
