1. 什么是HTML、CSS
是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站,如何看到网站的原始代码呢?通过鼠标右键选择查看网页源代码。
如何去写代码?写到哪里呢?
一个网站是由N多个网页组成的。 每一个网页 .html文件
电视剧,40集。 .mp4 文件
2. VSCode编辑器
VS code下载地址:https://code.visualstudio.com/
如何安装插件? 语言包、 open in browser view in borwser
学习编辑器基本使用?
设置:文件-> 首选项 -> 设置 ( 大小、是否换行 word wrap )
创建文件、创建文件夹、重命名和删除、搜索
ctrl + s : 保存
ctrl + a : 全选
ctrl + x、ctrl + c、ctrl + v : 剪切、复制、粘贴
ctrl + z、ctrl + y : 撤销、前进
shift + end : 从头选中一行
shift + home : 从尾部选中一行
shift + alt + ↓ : 快速复制一行
alt + ↑或↓ : 快速移动一行
tab : 向后缩进
tab + shift : 向前缩进
多光标 : alt + 鼠标左键
ctrl + d : 选则相同元素的下一个
3. chrome浏览器
Chrome下载地址: https://www.google.cn/intl/zh-CN/chrome/
百度统计浏览器市场份额: https://tongji.baidu.com/data/browser chrome : 68.88%
4. 深入了解网站开发
UI设计师 : 设计稿
web前端开发工程师(H5开发)
设计稿 -> 代码
数据库里的数据 -> 显示到页面
HTML + CSS
HTML : 结构
CSS : 样式
web后端开发工程师
5. web三大核心技术?
HTML
CSS
JavaScript
6. HTML基本结构和属性
HTML : 超文本 标记 语言
超文本 : 文本内容 + 非文本内容 ( 图片、视频、音频等 )
标记 : <单词>
语言 : 编程语言
标记也叫做标签:
<header>
<footer>
写法分成两种:
单标签 <header>
双标签 <header></header>
创建标签的快捷键:单词 + tab键 -> <单词>
标签是可以上下排列,也可以组合嵌套。
HTML常见标签:http://www.html5star.com/manual/html5label-meaning/
标签的属性:来修饰标签的,设置当前标签的一些功能。
<标签 属性="值" 属性2="值2">
7. HTML初始代码
每个.html文件都有的代码叫做初始代码 , 要复合html文件的规范写法。
! + tab键 : 快速的创建html的初始代码
<!DOCTYPE html> 文档声明 : 告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签:包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> 元信息:是编写网页中的一些辅助信息 charset="UTF-8"国际编码,让网页不出现乱码的情况
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
8. HTML注释?
写法: 在浏览器中看不到,只能在代码中看到注释的内容。
意义:
1. 把暂时不用的代码注释起来,方便以后使用。
2. 对开发人员进行提示。
快捷添加注释与删除注释:
1. ctrl + /
2. shift + alt + a
9. 标题与段落?
标题 -> 双标签 : <h1></h1> ... <h6></h6>
在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
段落 -> 双标签 : <p></p>
10. 文本修饰标签?
强调 -> 双标签 : <strong></strong>、<em></em>
区别:
1. 写法和展示效果是有区别的,一个加粗、一个斜体
2. strong的强调性更强,em的强调性稍弱。
下标 : <sub></sub>
上标 : <sup></sup>
删除文本 : <del></del>
插入文本 : <ins></ins>
注:一般情况下,删除文本都是和插入文本配合使用的。
11. 图片标签?
img -> 单标签
src : 引入图片的地址。
alt : 当图片出现问题的时候,可以显示一段友好的提示文字。
title : 提示信息
width、height : 图片的大小
12. 路径的引入?
相对路径
绝对路径
13. 链接标签?
a -> 双标签 <a></a>
href属性 : 链接的地址
target属性 : 可以改变链接打开的方式,默认情况下:在当前页面打开 _self 新窗口打开 _blank
base -> 单标签 :作用就是改变链接的默认行为的。
href属性指定目标网页地址。该地址可以有几种类型:
● 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
● 相对URL - 指当前站点中确切的路径(href="index.htm")
● 锚URL - 指向页面中的锚(href="#top")
target:
● _blank表示在新标签页中打开目标网页
● _self表示在当前标签页中打开目标网页
14. 锚点?
两种做法
1. #号 + id属性
2. #号 + name属性(注意name属性加给的是a标签)
15. 特殊字符?
1. & + 字符
2. 解决冲突啊 左右尖括号、添加多个空格的实现
3. < >
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c77fc78fd9646126f2ef44911d9a0c5a.png)
16. 列表标签?
1. 无序列表 -> ul li 符合嵌套的规范
type属性:
● disc(实心圆点,默认值)
● circle(空心圆圈)
● square(实心方块)
● none(无样式)
2. 有序列表 -> ol li 一般用的比较少,可以用无序列表来实现
type属性:
● 1 数字列表,默认值
● A 大写字母
● a 小写字母
● Ⅰ大写罗马
● ⅰ小写罗马
3. 定义列表 -> dl dt dd 列表项需要添加标题和对标题进行描述的内容
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.(最好通过css来设置长宽)
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列(即合并单元格)
注:列表之间可以互相嵌套,形成多层级的列表。
17. 表格标签
table、tr、th、td、caption 等
注:之前是有嵌套关系的,要符合嵌套规范。
语义化标签:tHead、tBody、tFood
注:在一个table中,tBody是可以出现多次的,但是tHead、tFood只能出现一次。
align : left、center、right
valign : top、middle、bottom
属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。
18. 表单标签
form、input、textarea、select、label ..
input(单标签)标签有一个type属性,决定是什么控件。
还有一些常见的属性:
checked、disabled、name、for ...
<input> 元素会根据不同的 type 属性,变化为多种形态。
属性说明:
● name:表单提交时的“键”,注意和id的区别
● value:表单提交时对应项的值
○ type="button", "reset", "submit"时,为按钮上显示的文本年内容
○ type="text","password","hidden"时,为输入框的初始值
○ type="checkbox", "radio", "file",为输入相关联的值
● checked:radio和checkbox默认被选中的项
● readonly:text和password设置只读
● disabled:所有input均适用
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d8746134fe83b8d7b1a34dda4fe3bfcc.png)
19. div和span?
div : 做一个区域划分的块
span : 对文字进行修饰的内联
20.select标签
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明:
● multiple:布尔属性,设置后为多选,否则默认单选
● disabled:禁用
● selected:默认选中该项
● value:定义提交时的选项值
21.label标签
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
定义:<label> 标签为 input 元素定义标注(标记)。
说明:
1. label 元素不会向用户呈现任何特殊效果。
2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
22.textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明:
● name:名称
● rows:行数
● cols:列数
● disabled:禁用