于对网页元素进行整理和分类主要使用HTML表现用于设置网页元素的版式、颜色、大小等外观样式主要使用CSS行为指网页模型的定义及交互的编写主要使用JavaScript

HTML

标签名定义说明html/htmlHTML标签页面中最大的标签即根标签head/head文档头部注意在head标签中必须要设置的标签是titletitle/title文档标题让页面拥有一个属于自己的网页标题body/body文档主体元素包含文档的所有内容

!DOCTYPE

2.绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径

如D:\前端\图片.jpg

target_self链接文字/ahref必需属性指定连接的URL地址

target指定打开方式默认当前页面打开_blank表示从新的页面打开链接资源

anchors时我们可以创建直接跳至该命名锚比如页面中某个小节的链接这样使用者就无需不停地滚动页面来寻找他们需要的信息了

bodya

内部链接网站内部页面之间相互链接如index.html路径为同一级

空链接#表示链接为空

网页元素链接在网页中的各种网页元素如文本、图像、白哦个、音频、视频等都可以添加超链接

锚点链接点击链接可以快速定位到页面的某个位置需要使用name属性

8.表格标签

tabletrth表头单元格内的文字/td/trtrtd普通单元格内的文字/tdtd普通单元格内的文字/td/tr/tabletable是定义表格的标签tr用于定义表格中的行td用于定义表格中的单元格有几个单元格该行就有几列th用于定义表头单元格常用于表格第一行表头单元格里面的文字会加粗居中显示

合并单元格

最上侧单元格为目标单元格写合并代码跨列合并横向colspan‘合并单元格的个数’

最左侧单元格为目标单元格写合并代码

action用于指定接受和处理数据的服务器URL地址method设置表单数据提交方式其取值为get或postget效率高但不安全、请求大小有限post安全、请求大小无限但效率低name指定表单名称以区分同一个页面中的多个表单域

表单控件

属性值描述button定义可点击按钮多数情况下用于通过JavaScript启动脚本checkbox定义复选框file定义输入字段和“浏览”按钮供文件上传hidden定义隐藏的输入字段image定义图像形式的提交按钮password定义密码字段。

该字段中的字符被掩码radio定义单选按钮reset定义重置按钮清除表单中所有数据submit定义提交按钮把表单数据发送到服务器text定义单行的输入字段用户可在其中输入文本默认宽度为20个字符

input其它属性

checked规定input元素首次加载时被选中使用语法为checkedchecked

name表单元素的名字要求单选框和复选框要有相同的name值表示同一组

一打开页面

使用场景label标签用于绑定一个表单元素当点击label标签内的文本时浏览器会自动将焦点光标转到或者选择对应的表单元素上用来增加用户体验

label

idsex核心label标签的for属性应该与相关元素的id属性相同

2.select下拉表单元素

selectoption北京/optionoption浙江/option

/selectselect定义下拉列表option定义下拉列表项

在option中定义

使用场景当用户输入内容较多的情况下就不能使用文本框text标签了常见于留言板、评论

textarea

ulliniko/lilihunter/lilimonesy/li

/ul无序列表是一个项目的列表此列项目使用粗体圆点典型的小黑圆圈进行标记。

CSS基础

/bodyid选择器通过#来定义只能被唯一调用通配符选择器通过*来选择所有标签自动调用

3.CSS语法及使用

1外部样式表通过使用外部样式表只需要一个文件就可以改变整个网站的外观。

HTML

background在一条声明中设置所有背景属性的简写属性。

background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。

background-clip规定背景的绘制区域。

background-color设置元素的背景色。

background-image设置元素的背景图像。

background-origin规定在何处放置背景图像。

background-position设置背景图像的开始位置。

background-repeat设置背景图像是否及如何重复。

background-size规定背景图像的尺寸。

5.三大特性

或者*0000元素选择器0001类选择器伪类选择器0010ID选择器0100行内样式style“”1000!important

6.盒子模型

属性不包括内边距、边框或外边距。

它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height

属性描述border简写属性在一条声明中设置所有边框属性。

border-color简写属性设置四条边框的颜色。

border-radius简写属性可设置圆角的所有四个

border-*-radius

属性。

border-style简写属性设置四条边框的样式。

border-width简写属性设置四条边框的宽度。

border-bottom简写属性在一条声明中设置所有下边框属性。

border-bottom-color设置下边框的颜色。

border-bottom-style设置下边框的样式。

border-bottom-width设置下边框的宽度。

border-left简写属性在一条声明中设置所有左边框属性。

border-left-color设置左边框的颜色。

border-left-style设置左边框的样式。

border-left-width设置左边框的宽度。

border-right简写属性在一条声明中设置所有右边框属性。

border-right-color设置右边框的颜色。

border-right-style设置右边框的样式。

border-right-width设置右边框的宽度。

border-top简写属性在一条声明中设置所有上边框属性。

border-top-color设置上边框的颜色。

border-top-style设置上边框的样式。

border-top-width设置上边框的宽度。

8.外边距、内边距

margin-topmargin-rightmargin-bottommargin-left

auto

padding-toppadding-rightpadding-bottompadding-left

length

属性描述color设置文本颜色。

direction指定文本的方向

书写方向。

letter-spacing设置字符间距。

line-height设置行高。

text-align指定文本的水平对齐方式。

text-decoration指定添加到文本的装饰效果。

text-indent指定文本块中首行的缩进。

text-shadow指定添加到文本的阴影效果。

text-transform控制文本的大小写。

text-overflow指定应如何向用户示意未显示的溢出内容。

unicode-bidi与

direction

属性一起使用设置或返回是否应重写文本来支持同一文档中的多种语言。

vertical-align指定文本的垂直对齐方式。

white-space指定如何处理元素内的空白。

word-spacing设置单词间距。

四、Emmet语法

生成标签直接输入标签名按tab键即可。

如果想要生成多个相同标签加上

div*3

【设置】搜索emmet.include在settings.json下的【用户】添加以下语句

editor.formatOnType:true,editor.formatOnSave:true五、VSCode

1.下载地址

https://pan.baidu.com/s/1FAu_EHbHbUbCNT5hAsC-zg?pwd6pwb

2.详细教程

VSCode使用详细教程_AC_meimei的博客-CSDN博客_vscode

使用教程