- 专业包括 移动端、web前端
- Web组成 结构(html、xml)、表现(css)、行为(js)
- W3C制定了结构(html、xml)和表现(css)的标准,是非赢利性的
- ECMA制定了行为(js)标准
- HTML是超文本标记语言,目前我们主要用第五大版本、仍在更新
- 站点的作用:用来归纳一个网站上所有的网页、素材以及他们之间的联系;划网站所有内容和代码,整合资源
- 站点包含的文件及内容:css、js、html、images、index.html
- 文件命名规则
<1>用英文不用中文;
<2>用小写英文字母、数字、下划线的组合、不包含汉字,空格,特殊字符;
<3>用字母开头
- 网站的首页必须命名为index.html, 放在最顶层目录
注意:
<1>index.html文件必须为站点首页,必须叫这个名字,部署到服务器后,网址默认指向的页面
<2>index.html文件必须放在最顶层目录中,和css、js、这些文件夹同级
<3>开始时,必须先建立好站点,再做后续开发,否则后期挪文件文件位置的话,代码需要大改。
vscode的使用
- 常规操作
<1>打开站点
——拖拽文件夹到vscode图标上
——左上角点击文件——选中打开文件夹——选择你想要的站点——确定
<2>改变主题颜色
——左下角小齿轮——点击颜色主题——选择你想要的颜色主题
<3>改变vscode字体大小
Ctrl+ +号 放大 Ctrl + -号 缩小
- 快捷键
<1>! 生成基本结构代码段
<2> Ctrl+s 保存
<3> Alt+b 默认浏览器运行
<4> ctrl+c ctrl+v 复制粘贴
<5> ctrl+x 剪切
<6> ctrl+z 返回上一步
<7> ctrl+y 取消返回上一步
<8>ctrl+/ 注释
<9>lorem 快速生成一段测试文本
- 注释:作用是程序员在页面开发中的标记和记录,注释并不会在页面中显示出来,但是会存在于代码中,浏览器并不会解析注释。
- 三种结构注释不同 html<!-- --> css<* *> js// 注释之间不能相互嵌套包裹
- 页面基本结构
<1>!DOCTYPE为声明文档类型 html
<2>head 头部标签,用来存放页面元信息
<3>title 页签
<4>body 页面主体,我们主要在这个标签里边写html代码
- 标签基本结构
(1)双标记、常规标记、双标签
<1>基本结构 <标记名 属性="属性值" 属性="属性值"></标记名>
<2>特征:双标记成对出现,各个双标记之间可以嵌套。
(2)单标记、空标记、单标签
<1>基本结构 <标记名 属性="属性值" 属性="属性值" />
<2>特征:单标记单个出现,不能嵌套
(3)标签结构特点:
<1>标记写在<>号内,<>号内的第一个单词叫做标签名(标记名)
<2><>内除了标签名之外,还有属性,属性可以不写,也可以有多条,属性写在开始标签中。
<3>多个属性时,属性和属性之间用空格隔开。属性和属性值之间用=号连接,属性值写在""内。
16.常用基本html标签
(1)标题标签 h1-h6
特点:具有标题的含义,自带间距,默认独占一行.每个标题都有自己的字号,默认加粗
(2)正文段落标签 p
特点:具有文本段落的含义。自带间距,默认独占一行,放不下换行。
(3)空格符
(4)换行 br
(5)水平线、分割线hr
(6)加粗 b/strong strong具有一个强调突出的语气
(7)倾斜 i/em em具有一个强调突出的语气
(8)下划线 u
(9)删除线 s/del del具有一个强调突出的语气
(10)上标 sup
(11)下标 sub
(12)有序列表 ol>li
type属性 I、 1 、 I、 a、 A、 start属性 从哪里开始
(13)无序列表 ul>li
(14)自定义列表 dl>dd+dt
补充:快捷写法符号
>号代表包含
*号为生成几个
{}为对标签内的文字内容
$代表数字
+同级标签
9.图片标签 img
默认横排显示,不独占一行
src 图片路径地址
(1)相对路径 ../返回上一级 xxx/ 进入某个文件夹 注意:找路径时,不要出站点
(2)网络路径
(3)绝对路径
alt 图片无法正常显示时,出现的文字信息
title 鼠标悬停到图片身上时的文本提示信息
width 宽度(不用带单位)
height 高度(不用带单位)
注意:图片一边都有自己的宽高比和默认大小。如果我们想要改变图片大小,
只需要改变宽或者高即可。无需两个都进行更改。
10.超链接 a
作用:用来做页面跳转
特点:默认带下划线,和字体颜色。默认不独占一行
href 要去的路径地址
target _self(默认值):在当前页面进行跳转 _blank:打开一个新页面,进行跳转
title 当鼠标悬停在超链接上的提示文本