教你如何建设网站阿里去,wordpress文字添加图片不显示,莱芜雪野湖风景区门票多少钱,网站内链 外链前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本#xff1a;文本#xff0c;声音#xff0c;图片#xff0c;视频#xff0c;表格#xff0c;链接 标记#xff1a;由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vs…前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本文本声音图片视频表格链接 标记由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vscode运行
自动刷新页面
!DOCTYPE html//指定当前html版本5
html langen//指定当前页面内容为英文headmeta charsetUTF-8//浏览器解码规则meta http-equivX-UA-Compatible contentIEedge//IE浏览器渲染效果按照IE浏览器最高版本展示meta nameviewport contentwidthdevice-width, initial-scale1.0//移动端适配titlehello/title
/headbodyhello world
/body/html htmlhtml文件根标签 head编写页面相关的属性 title页面标题 body页面内容展示信息 head和body是兄弟标签 head和title是父子标签 html
标签标题段落换行注释
注释
!-- 这是注释 --//ctrl/
标题标签 h1/h1 h2/h2 ... h6/h6 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyh1这是h1标签/h1h2这是h2标签/h2h3这是h3标签/h3h4这是h4标签/h4h5这是h5标签/h5h6这是h6标签/h6
/body/html 段落标签 p/p每行存在可察的间隙 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触Bonsai CSS的新手来说建议按照官方文档中的指导逐步操作确保所有依赖项都已正确安装并验证工具链是否正常工作1。/pp使用CSS Hooks管理样式表,CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸宽度/高度及其定位方式浮动、绝对定位等。/p
/body/html 换行标签 br或者/br实现段落换行间隙小于段落间隙 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触Bonsai CSS的新手来说建议按照官方文档中的指导逐步操作确保所有依赖项都已正确安装并验证工具链是否正常工作1。/pp使用CSS Hooks管理样式表,,brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸宽度/高度及其定位方式浮动、绝对定位等。/p
/body/html 标签加粗倾斜删除线下划线 加粗strong b 倾斜em i 删除线del s 下划线ins u 前者起强调作用 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指导逐步操作/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解CSS布局的核心在于i掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html 图像 srctitlealtheight/weightborder
img标签_src属性 img src./baidu.png img标签必须搭配src使用指定图片路径 绝对路径 图片路径 网络上的图片资源 相对路径 ./xxx.png当前路径 ./img/xxx.png某个文件夹下 ../xxx.png上一层路径 本地图片插入
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指img src./baidu.png/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解CSS布局的核心在于i掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html 网络图片插入
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指img src./baidu.png/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解imgsrchttps://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpgi掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html img标签_alt属性 img src alt图片加载失败... border1px width100px height100px alt替换文本当文本不能正确显示时会显示一个替换的文字 title提示文本鼠标放到图片上就会有提示 width/height控制宽度高度高度和宽度一般该一个就行另外一个会等比例缩放否则图片会失衡 border边框参数是宽度的像素但是一般使用css设定 超链接标签
a_herfa_target a href target /a href必须具备表示点击会跳转到哪个页面 target打开方式默认是_self. 如果是_blank 则用新的标签打开 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya hrefhttps://www.baidu.com/跳转到百度/aa href20241225.html跳转到html页面/aa href#在当前页面/aa hrefhttps://www.baidu.com/img srcbaidu.png alt title跳转到百度/a
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指img src./baidu.png title这是一张百度图片border2px/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了ahrefhttps://www.baidu.com/s?ieutf-8f8rsv_bp1tn39042058_26_oem_dgwd%E7%99%BE%E5%BA%A6oq%25E6%25AD%25B9%25E6%25AF%2592rsv_pqc049e1db002d548frsv_td34dAccK%2BMxkf%2Bu6RAUck6LsIGwU3XAhvhXOF0K3mxNmrBu7Z6jtUQdO4SYLYJD%2BbePlATiDQ6ELrqlangcnrsv_dltbrsv_sug38rsv_enter1rsv_sug16rsv_sug7100rsv_sug20rsv_btypetinputT1164rsv_sug42928targethttps://www.baidu.com/简化的方式去管理和增强/abr检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解img srchttps://www.keaitupian.cn/cjpic/fombd/2/253/1659552792/3869332496.jpgalt图片加载失败...i掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html 表格tabletrtdththeadalignbordercellpaddingcellspacingwidth/height table表示整个表格 tr表示表格的一行 td表示一个单元格 th表示表头单元格会居中加粗 thead表格的头部区域注意和th区分范围是比th要大的 thead里面的内容居中加粗显示 align十单元格相对于周围元素的对齐方式. aligncenter不是内部元素的对齐方式 border表示边框1表示有边框数字越大边框越粗 表示没边框 cellpadding内容距离边框的距离默认1像素 cellspacing单元格之间的距离默认是2像素 width/height设置尺寸 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0tr aligncentertd姓名/tdtd性别/tdtd年龄/td/trtr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/table
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/table
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtr aligncentertd姓名/tdtd性别/tdtd年龄/td/trtr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/table
/body/html 格式书写 thead/thead tbody/tbody !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtbodytr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/tbody/table
/body/html
合并单元格水平/竖直 rowspan 竖直方向上 colspan 水平方向 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtbodytr aligncentertd姓名/tdtd性别/tdtd年龄/td/trtr aligncentertd张三/tdtd rowspan2男/tdtd3/td/trtr aligncentertd李四/td!-- td男/td --td4/td/trtr aligncentertd colspan2王五/女/td!-- td女/td --td5/td/tr/tbody/table
/body/html 列表
无序列表ulli
type属性 disc实心圆浏览器默认展示方式 square实心方块 circle空心圆 快捷键 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ulli这是内容1/lili这是内容2/lili这是内容3/li/ul
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ul typecircleli这是内容1/lili这是内容2/lili这是内容3/li/ul
/body/html 有序列表olli
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ul typecircleli这是内容1/lili这是内容2/lili这是内容3/li/ulh1这是一个有序列表/h1olli这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/ol
/body/html typestart属性 type start h1这是一个有序列表/h1ol typeA start3li这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/ol 自定义列表dldtdd
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ul typecircleli这是内容1/lili这是内容2/lili这是内容3/li/ulh1这是一个有序列表/h1ol typeA start3li这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/olh1这是一个自定义列表/h1dldt自定义列表显示内容dd自定义列表内容1/dddd自定义列表内容2/dddd自定义列表内容3/dd/dt/dl
/body/html 表单inputformlabelselect 表单标签完成服务器的一次交互 表单域包含表单元素的区域重点是form标签 form action/form 表单控件输入框提交按钮重点是input标签必须搭配表单域完成 可以通过对type进行对应的取值来控制input类型 input 文本框input typetext 单行输入 密码框input typepassword 单选框input typeradio namesex checkedcheckedname相同时只能点中一个checkedchecked标记性别默认为该值 复选框input typecheckbox 普通按钮input typebutton value我是个按钮 οnclickalert(hello)onclick表示点击出现什么反应 提交按钮input typesubmit 清空按钮input typereset 提交文件input typefile !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform action姓名input typetextbr密码input typepasswordbr性别input typeradio namesex男input typeradio namesex checkedchecked女br爱好input typecheckbox吃饭input typecheckbox睡觉input typecheckbox玩游戏brinput typebutton value我是个按钮 onclickalert(hello)input typesubmitinput typeresetinput typefile/form
/body/html 提交
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform actionhttps://www.baidu.com/课程input typetext namecourseinput typesubmit/form
/body/html label label formale男/label input typeradio namesex idmale bodyinput typeradio namesex男input typeradio namesex女//点击按钮才能选中
/body bodylabel formale男/labelinput typeradio namesex idmalelabel forfemale女/labelinput typeradio namesex idfemale//点击文字也可选中
/body select默认展示第一个 select name id option value selectedselected/option /select !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodylabel formale男/labelinput typeradio namesex idmalelabel forfemale女/labelinput typeradio namesex idfemaleselect name idoption value---请选择年份---/optionoption value---1991---/optionoption value---1992---/optionoption value---1993---/optionoption value---1994---/option/select
/body/html select name idoption value---请选择年份---/optionoption value selectedselected---1991---/option//展示该选项option value---1992---/optionoption value---1993---/optionoption value---1994---/option/select textarea内容框 textarea name id cols30 rows10/textarea 无语义标签divspan 没有固定的用途 div 是独占一行的是一个大盒子 span 不占一行是一个小盒子 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydivdivspan吃饭/spanspan睡觉/spanspan玩游戏/span/divdivdiv吃饭/divdiv睡觉/divdiv玩游戏/div/div/div
/body/html 特殊字符 有些特殊的字符在html文件不能直接表示 空格nbsp 小于号lt 大于号gt 按位与amp 实践项目---简历书写 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1某某某/h1divh2基本信息/h2img srcyy.jpg alt width200 height200spanp求职意向:Java开发/p/spanspanp联系电话:xxx-xxx-xxx/p/spanspanp个人邮箱:xxx-xxx163.com/p/spanspanpa hrefhttps://gitee.com/我的Gitee/a/p/spanspanpa hrefhttps://csdnnews.blog.csdn.net/article/details/130333678?spm1000.2115.3001.5927我的博客/a/p/span/divdivh2教育背景/h2olli小学/lili初中/lili高中/lili大学/li/ol/divdivh2专业技能/h2ulli掌握Java编程/lili掌握数据结构/lili掌握前端相关技能,html,css,JavaScript/li/ul/divdivh2个人项目/h2olh3li留言墙/li/h3p开发时间:2023年4月1日~2023年4月28日/pp功能介绍/pulli支持留言发布/lili支持匿名留言/li/ul/ololh3li学习小助手/li/h3p开发时间:2023年5月1日~2023年5月28日/pp功能介绍/pulli错词检测/lili支持同学探讨/li/ul/ol/divdivh2个人评价/h2p热爱生活,热爱编程/p/div
/body/html
个人简历页面填写 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytabletheadh2请填写简历信息/h2/theadtbodytrtd姓名/tdtdinput typetext/td/trtrtd性别/tdtdinput typeradio idmale namesexlabel formale男/labelinput typeradio idfemale namesexlabel forfemale女/label/td/trtrtd出生日期/tdtdselect name idoption value selectedselected---请选择年份---/optionoption value---2004---/optionoption value---2005---/optionoption value---2006---/optionoption value---2007---/option/selectselect name idoption value---请选择月份---/optionoption value---1月---/optionoption value---2月---/optionoption value---3月---/optionoption value---4月---/optionoption value---5月---/optionoption value---7月---/optionoption value---8月---/optionoption value---9月---/optionoption value---10月---/optionoption value---11月---/optionoption value---12月---/option/selectselect name idoption value---请选择日期---/optionoption value---1号---/optionoption value---2号---/optionoption value---3号---/optionoption value---4号---/optionoption value---5号---/optionoption value---6号---/option/select/td/trtrtd就读学校/tdtdinput typetext/td/trtrtd应聘岗位/tdtdinput typecheckbox前端开发input typecheckbox后端开发input typecheckbox测试开发input typecheckbox运维开发/td/trtrtd掌握的技能/tdtdtextarea name id cols30 rows10/textarea/td/trtrtd项目经历/tdtdtextarea name id cols30 rows10/textarea/td/trtrtd/tdtdinput typecheckbox我已仔细阅读过公司的招牌要求/td/trtrtd/tdtda hrefhttps://www.baidu.com/查看我的状态/a/td/trtrtd/tdtdh3请应聘者确认/h3/td/trtrtd/tdtdulli以上信息真实有效/lili能够尽早去公司实习/lili能接受公司的加班文化/li/ul/td/tr/tbody/table
/body/html
css 控制页面的展示样式 基本语法规范 选择器{一条/N条声明} 选择器决定针对谁修改找谁 声明决定修改啥干啥 声明的属性是键值对使用区分键值对使用区分键值和值 引入方式
内部样式表 将css嵌套到html页面中通过style标签嵌套 优点做到样式和页面分离 缺点分离不够彻底尤其是css内容多的时候 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {color: red;font-size: 30px;}/style
/headbodyphello world/p
/body/html
行内样式表 p stylecolor:blue;font-size:40px;hello/p 行内样式表优先级高于内部样式表 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {color: red;font-size: 30px;}/style
/headbodyphello world/pp stylecolor:blue;font-size:40px;hello/p
/body/html 外部样式 1.创建一个css文件 2.使用link标签引入css !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./demo01.css//relstylesheet表示引入的是样式表//href./demo01.css表示样式表当前路径
/headbodyphello css/p
/body/html 选择器种类 1.基础选择器单个选择器构成 标签选择器 类选择器 id选择器 通配符选择器 2.复合选择器把多种基础选择器综合运用起来 后代选择器 子选择器 并集选择器 伪类选择器 基础选择器
标签选择器 //demo01.html!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./demo01.css
/headbodyphello css/pphello javascript/ph2hello/h2
/body/html
//demo01.cssp {color: red;font-size: 80px;
} 类选择器 p classeat吃饭/p .eat { color: red; } //demo01.html!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./demo02.css
/headbodyp classeat吃饭/pp classsleep睡觉/pp classgame玩游戏/p
/body/html
//demo02.css.eat {color: red;
}.sleep {color: blue;
}.game {color: brown;
}
样式叠加
//demo02.html!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./demo02.css
/headbodyp classeat吃饭/pp classsleep睡觉/pp classplay game玩游戏/p//样式叠加
/body/html
//demo02.css.eat {color: red;
}.sleep {color: blue;
}.game {color: brown;
}.play {font-size: 30px;
} id选择器 css中使用#开头表示id选择器 id选择器的值和html中某个元素的id值相同 html元素的id不必带#号 id是唯一的不能被多个标签使用是和类选择器最大的区别 p idfehello id/p #fe { color: red; font-size: 30px; } //demo03.html!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./demo03.css
/headbodyp idfehello id/pp iddehello my life/p
/body/html
//demo03.css#fe {color: red;font-size: 30px;
}#de {color: blue;font-size: 80px;
} 通配符选择器 使用 * 的定义选取所有的标签 在实际应用开发中针对页面所有的元素默认样式进行消除主要用来消除边距 * { color:red; } 页面所有内容都会被改为红色 不需要被页面结构调用 //demo03.html!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./demo03.css
/headbodyp idfehello id/pp iddehello my life/p
/body/html
//demo03.css#fe {color: red;font-size: 30px;
}#de {color: blue;font-size: 80px;
}* {background-color: pink;
} 复合选择器 将之前学习的基础选择器的组合 后代选择器 元素1 元素2 {样式说明} 元素1和元素2要使用空格分割 元素1是父级元素2是子级只选择元素2不影响元素1 ol li { color: red; } ol li吃饭/li li吃饭/li li a href#吃饭/a /li /ol 选择某个父元素中的某个子元素 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleol li {color: red;}ul li {color: blue;}ol a {color: purple;}/style
/headbodyulli吃饭/lili吃饭/lili吃饭/li/ulolli吃饭/lili吃饭/lilia href#吃饭/a/li/ol
/body/html 伪类选择器
链接伪类选择器 实现鼠标在文字上悬停时文字的变化 alink 选择未被访问过的链接 avisited 选择已经被访问过的链接 ahover 选择鼠标指针悬停上的链接 aactive 选择活动链接鼠标按下了但是未弹起 input { color: red; } input:hover { color: blue; } input:active { color: palegreen; } input typebutton value按钮 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea {color: black;}a:hover {color: blue;}a:active {color: pink;font-size: 80px;}input {color: red;}input:hover {color: blue;}input:active {color: palegreen;}/style
/headbodya href#不跳转/abrinput typebutton value按钮
/body/html
字体属性
字体样式 font-family: 宋体; !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {font-family: 宋体;}/style
/headbodydiv这是宋体/div
/body/html
字体大小 font-size: 80px; 字体颜色 三原色红色绿色蓝色 colorred color#ff0000//ff红色像素点这个数字越大红色越深00绿色像素点00蓝色像素点 colorrgb255,0,0//红绿蓝 字体粗细 font-weightbold 可以用数字表示粗细 700bold400是不变粗normal 取值范围 100-900 文字样式 font-style: oblique; 文本对齐 text-align[值] 控制文字水平方向的对齐 不光是文本对齐还能控制照片等元素居中或者靠右 center居中对齐 left左对齐 right右对齐 文本缩进 text-indent[值] 单位可以使用px或者em 使用em作为单位更好1个em就是当前元素的文字大小 锁紧可以是负的表示左缩进会导致文字就冒出去了 文本装饰 text-decoration[值] underline 下划线.[常用] none 啥也没有. 可以给a标签去掉下划线 overline 上划线.[不常用] line-through 删除线 [不常用] !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {text-align: left;}h2 {text-align: center;}h3 {text-align: right;}p {text-indent: 2em;text-decoration: underline;}/style
/headbodyh1靠左/h1h2居中/h2h3靠右/h3pLorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda, essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!/p
/body/html 行高 line-height[值] 顶线 中线 基线相当于英语四线格的倒数第二条线 底线 内容区底线和顶线包裹的区域 行高上边距下边距字体大小 背景属性
背景颜色 background-color: pink; 背景图片 background-image: url(...); url不要遗漏 url可以是绝对路径也可以是相对路径 url上可以加引号也可以不加 背景平铺 background-repeat: [平铺方式]; repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺 默认是repeat 背景位置 background-position: x y; background-position: right; 参数有三种风格 1.方位名词topleftrightbottom 2.精确名词坐标或者百分比以左上角为原点 3.混合单位同时包含方位名词和精确单位 如果参数的两个值都是方位名词则前后顺序无关top left和left top等效 如果只指定了一个方位名词则第二个默认居中left则意味着水平居中top意味着垂直居中 如果参数是精确值则第一个肯定是x第二个肯定是y100 200意味着x为100y为200 如果参数是精确值且只给了一个数值则该数值一定是x坐标另一个默认垂直居中 如果参数是混合单位则第一个值一定是x第二个值一定是y坐标100 center 表示横坐标位100垂直居中 背景尺寸 background-size: length|percentage|cover|contain; 可以填具体的数值如40px X 60px 可以填百分比按照父元素的尺寸设置 cover把背景图像扩展至足够大使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在北京定位区域中 把图像扩展至最大尺寸以使其宽度和高度完全适应内容区域 cover contain 圆角矩形 border-radius:length;//length表示内切圆的半径数值越大弧线越强烈 生成圆形盒子宽高相同半径为高度的一半或者写成50%
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;border: 2px green solid;border-radius: 100px;}/style
/headbodydiv/div
/body/html 展开写法---对四个角分别设置等价于(按照顺时针排列) border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; border-radius: 10px 20px 30px 40px; 等价于(按照顺时针排列) border-top-left-radius:10px; border-top-right-radius:20px; border-bottom-right-radius:30px; border-bottom-left-radius:40px; !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;border: 2px green solid;border-radius: 100px;border-top-left-radius: 2em;border-top-right-radius: 2em;border-bottom-right-radius: 2em;border-bottom-left-radius: 2em;}/style
/headbodydiv/div
/body/html
元素的显示模式
块级元素占据一行 h1 - h6 p div ul ol li ... 独占一行 高度, 宽度, 内外边距, 行高都可以控制. 宽度默认是父级元素宽度的 100% (和父元素一样宽) 是一个容器(盒子), 里面可以放行内和块级元素. 文字类的元素内不能使用块级元素 p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div 行内元素/内联元素不占据一行 a strong b em i del s ins u span ... 不独占一行, 一行可以显示多个 设置高度, 宽度, 行高无效 左右外边距有效(上下无效). 内边距有效. 默认宽度就是本身的内容 行内元素只能容纳文本和其他行内元素, 不能放块级元素 a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做). a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素. 行内元素和块级元素的区别 块级元素独占一行, 行内元素不独占一行 块级元素可以设置宽高, 行内元素不能设置宽高. 块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置. 改变显示模式 使用 display 属性可以修改元素的显示模式. 可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素. display: block 改成块级元素 [常用] display: inline 改成行内元素 [很少用] display: inline-block 改成行内块元素 修改前 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodya href#第一个链接/aa href#第二个链接/a
/body/html
修改后 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea {display: block;}/style
/headbodya href#第一个链接/aa href#第二个链接/a
/body/html 盒模型 边框 border 内容 content 内边距 padding 外边距 margin 边框
基础属性 粗细: border-width 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框 颜色: border-color 支持简写, 没有顺序要求 //border: 1px solid red; border-top/bottom/left/right可以改四个方向的任意边框. 边框会撑大盒子 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子. * { box-sizing: border-box; } !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 100px;border-color: black;border: solid;border-width: 10px;}* {box-sizing: border-box;}/style
/headbodydiv/div
/body/html
内边距padding 设置内容和边框之间的距离. 默认内容是顶着边框来放置的. 用 padding 来控制这个距离 可以给四个方向都加上边距 padding-top padding-bottom padding-left padding-right !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 300px;height: 400px;padding-left: 5px;padding-top: 5px;padding-right: 5px;padding-bottom: 5px;}/style
/headbodydiv这是一个div/div
/body/html
复合写法 padding: 5px; 表示四个方向都是 5px padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针) 外边距 控制盒子和盒子之间的距离. 可以给四个方向都加上边距 margin-top margin-bottom margin-left margin-right 外边距默认为0 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestylediv {border: solid green 5px;}/style
/headbodydiv/divdiv/divdiv/div
/body/html
加了外边距之后 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestylediv {border: solid green 5px;margin-top: 5px;margin-bottom: 5px;margin-right: 5px;margin-left: 5px;}/style
/headbodydiv/divdiv/divdiv/div
/body/html
块级元素水平居中 前提: 指定宽度(如果不指定宽度, 默认和父元素一致) 把水平 margin 设为 auto margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestylediv {border: solid green 5px;width: 20px;height: 30px;}/style
/headbodydiv/divdiv/divdiv/div
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidth, initial-scale1.0titleDocument/titlestylediv {border: solid green 5px;width: 20px;height: 30px;margin: auto;}/style
/headbodydiv/divdiv/divdiv/div
/body/html 这个水平居中的方式和 text-align 不一样. margin: auto 是给块级元素用得到. text-align: center 是让行内元素或者行内块元素居中的. 另外, 对于垂直居中, 不能使用 上下 margin 为 auto 的方式. 去除浏览器默认样式 * { marign: 0; padding: 0; } 弹性布局 页面布局效果 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydivspan1/spanspan2/spanspan3/span/divstylediv {height: 700px;width: 700px;background-color: green;}div span {height: 100px;width: 100px;background-color: red;}/style
/body/html displayflex !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydivspan1/spanspan2/spanspan3/span/divstylediv {height: 700px;width: 700px;background-color: green;display: flex}div span {height: 100px;width: 100px;background-color: red;}/style
/body/html flex 布局基本概念 flex 是 flexible box 的缩写. 意思为 弹性盒子. 任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局. 被设置为 display:flex 属性的元素, 称为 flex container 它的所有子元素立刻称为了该容器的成员, 称为 flex item flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴) justify-content: center; justify-content: start;默认格式 justify-content: end; justify-content: center; justify-content: end; justify-content: space-between; align-items: start; align-items: center; align-items: end; 广告牌 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 308px;height: 204px;border: #d8dad8 solid 2px;background-color: #fcfffc;}.title {height: 40px;padding-left: 20px;font-size: 18px;color: #9e9d9a;border-bottom: 2px dotted #e8ebe8;}.item {font-size: 16px;flood-color: #898b76;padding-left: 25px;line-height: 28px;padding-top: 10px;}/style
/headbodydiv classboxdiv classtitle广告板/divdiv classcontentdiv classitem赔钱清仓甩卖全场一律八折优惠/divdiv classitem赔钱清仓甩卖全场一律八折优惠/divdiv classitem赔钱清仓甩卖全场一律八折优惠/divdiv classitem赔钱清仓甩卖全场一律八折优惠/div/div
/body/html
