信阳网站设计,房屋设计图怎么制作,wordpress iframe,企业主题展厅设计公司为后面爬虫打基础
使用Visual Studio Code#xff08;VS Code#xff09;
https://code.visualstudio.com/#alt-downloads 网页基础
创建一个html网页 新建一个文件 文件名后缀.html
书写网页模板
html:5 回车键#xff08;或者Tab键#xff09;英文感叹号! 回…为后面爬虫打基础
使用Visual Studio CodeVS Code
https://code.visualstudio.com/#alt-downloads 网页基础
创建一个html网页 新建一个文件 文件名后缀.html
书写网页模板
html:5 回车键或者Tab键英文感叹号! 回车键
注释 Ctrl
运行前记得先保存。或者设置自动保存
标签
由包裹的关键字称作标签内部也有属性值。
单标签只有一个开头的标签
双标签有开头有结束 区分/结束符
!DOCTYPE html
!-- 规定这个网页是什么文档类型 --
html langen!-- html网页根标签开始 lang(属性)表示网页字体语言en英文网页zh-cn中文网页--
head!-- head网页头标签 给浏览器看的内容 --meta charsetUTF-8!-- meta辅助网页标签charset字符编码格式utf-8万国码/通用码防止网页乱码 --meta nameviewport contentwidthdevice-width, initial-scale1.0!-- name描述属性viewport初始化浏览器操作content内容属性width宽度初始化浏览器的宽度device-width设备宽度initial-scale1.0初始化浏览器窗口缩放比例1.0表示100%/适配当前设备宽度/--titleDocument/title!-- title标题标签 --
/head
body
!-- body网页身体标签 给用户展示的区域 --
/body
/html
!-- 网页根标签结束 -- 常用标签
1.div标签
2.h系列标签h1~h6
3.p文本段落标签
4.span包裹文字标签 可以在一行显示
body!-- div标签/盒子标签 --div盒子标签/div!-- 标题标签 --!-- 一级标题标签尽量只在这个网页出现一次 --h1一级标题/h1!-- 二级或其他级标签都可以出现多次 --h2二级标题/h2h6六级标题/h6!-- p文本标签 --p文本段落标签 单行显示/p!-- span包裹文字标签 --span stylecolor: pink;span我啊是可以在一行显示出来的/span!-- p标签里面不可嵌套其他块级标签 如div h1-h6等 --p嵌套spanlala/span/p
/body
5.a超链接标签
!-- 超链接可以放在p标签里面 href超链接跳转的地址/图片等 --
a href网站链接点击这里的文字会跳转到该链接的网站/a!-- href 可以放网络路径也可以放本地路径相对路径访问方式./文件名.html (同一文件夹下)../ (找上一级文件的内容)绝对路径访问方式从什么盘开始一直到文件后缀名结束最好不要用绝对路径的访问方式每一个人电脑的盘内容不一样--
6.br换行标签
h1 idtop顶部文字/h1brbrbr!-- 添加锚点 --a href#top点击回到顶部/a!-- a标签的target属性:指定打开位置 --a href网站链接 target_self点击这里在当前页面中打开/aa href网站链接 target_blank点击新开标签页,可以开多个/aa href网站链接 target_new点击这里在当前页面中打开只能开一个但是有的网站会强制新开多个/a
7.img图片标签
!-- img用来放网页中展示的图片 --
img src在这里放图片地址 alt这里写图片描述/提示 title当鼠标移到这里就会提示相应文字 width修改图片宽度 height修改图片高度!-- 如果只修改图片的高/宽图片就会按照比例相应缩放 --
8.列表标签
有序/无序/自定义列表 !-- ol有序列表默认数字序号可通过type属性更改typea,字母排序)typeI,罗马数字排序 --olli第一条(1.)/lili第二条(2.)/li/ol!-- ol标签规范子标签必须是li标签 --!-- ul无序列表子标签也必须是li标签 --ul typecircleli内容前面/lili是圆点点/li/ul!-- 可通过type属性更改disc:实心黑点circle空心圆点squ实心方块none不显示 --!-- dl自定义列表dt自定义列表题目dd列表项目 --dldt第一大点/dtdd第一大点的第一小点/dddd第一大点的第二小点/dddt第二大点/dt/dl!-- 列表之间可以多个嵌套 --ulolli123/lili自定义dldt/dt/dl/li/ol/ul
9.b加粗标签 视觉上加粗
strong加粗标签 突出重要性标签更容易被搜索引擎找到
10.i文本倾斜标签 视觉上倾斜
em文本倾斜标签 突出重要性标签更容易被搜索引擎找到
11.u文本下划线标签 视觉上加了下划线
ins文本下划线标签 突出重要性标签更容易被搜索引擎找到
12.s删除线标签 视觉上加了删除线
del删除线标签 突出重要性标签更容易被搜索引擎找到
13.语义化标签:为了更好的规范而存在(以w3c为规范) 特殊符号标签
lt; 小于号
gt; 大于号
yen; 人民币符号
nbsp; 空格符
copy; 版权符 css基础样式
css 层叠样式表 修饰网页内容 文字大小 颜色 排版 高宽等
行内样式
写法直接写在标签属性中
标签名 stylecss代码
优点书写简单
缺点不利于维护不能重复利用结构和样式分离
内部样式
写法直接写在html的文档里 通过style标签
style标签通常会放在head标签中的title下方
优点部分结构和样式分离比较利于维护
缺点没有真正的结构样式分离
外部样式
先单独创建一个文件 并且文件后缀名.css再通过link relstylesheet href./文件名.css导入
优点结构和样式进行分离可以重复利用
缺点书写较麻烦
初级选择器
1.标签名选择器 标签名{} /* 标签名选择器 */p{color: pink;}/* 选择器{属性属性值属性2属性值2} */
2.id选择器 #id名{} 使用标签名 idid名 (命名是唯一的) /* id选择器 */#bos{color: red;}
3.类名选择器 .类名{} 使用标签名 class类名 /* 类名选择器 */.text{color: blue;}
也可以这样多调用
div classtext text2/div
4.后代选择器 #wap .ip{font-size: 20px;} 父代用idid名调用子代用class类名来调用
div idwapp classip/p/div
5.通配符 所有的内容都会变色 *qq{color: purple;}
6.子级选择器 /* 选择到wrap类名的子级--p标签 */.wrapp{color: pink;}
7.相邻兄弟选择器 与div标签相邻的p标签颜色改变但中间如果还有标签则不会改变。 /* 相邻兄弟选择器 */divp{color: blue;}
8.同级兄弟选择器 即便p标签与div标签没有相邻颜色也可以改变。 /* 同级兄弟选择器 */div~p{color: skyblue;}
9.并列/合并选择器 都改变颜色了 /* 并列/合并选择器 */div, span, p{color: darkblue;}
10.交集选择器 找到p标签中有text类名的标签 /* 交集选择器 */p.text{color: aqua;}
