一、参考资料
1.课程链接
HTML，CSS，JavaScript，web前端零基础到精通一套搞定，专为Java程序员打造的前端课程_哔哩哔哩_bilibili
2.开发文档
二、前后端简介
1.WEB模型
前端用于采集和展示信息，中间的数据请求由后端负责
CS架构：客服端-服务器，通过APP/软件访问
BS架构：浏览器-服务器，通过网站访问
浏览器内核用来解析前端代码
2.流程
三、HTML5+CSS+JS
1.功能
HTML用来搭建页面内容和结构，拓展名为.html
CSS用来添加样式，比如字体颜色大小、背景颜色、字体间距等，拓展名为.css
JS用来实现网页的行为，让页面动起来，拓展名为.js
2.前端开发工具
常用vscode来开发
3.VScode插件
vscode中可安装一些插件：Auto Rename Tag（自动修改尾标签），会了吧（翻译单词）
Live Server插件工作原理：html文件要放到文件夹里，用vscode打开文件夹，右键
可以在vscode中打开页面，修改内容之后保存会在页面实时更新
四、HTML5
1.HTML和XHTML
发展历程：HTML4------->XHTML--------->HTML5
HTML的语法较松散，可以没有根结构，XHTML的语法很严格，现有绝大多数还是用HTML
HTML5是跨平台的，可以在不同类型的硬件上运行。
HTML文档=网页，包含标签和文本
2.注释
快捷键ctrl+/
3.标签
（1）语法
所有的指令都需要标签（开始标签，内容/标签体，结束标签，元素），标签不区分大小写，推荐使用小写
（2）分类
按照标签的结构来分：①围堵标签，如段落<p></p>②自闭合标签，如水平分割线<hr>
按照标签效果来分：①行内（内联）标签：不会独占一行，会和其他标签共享一行。表示斜体
我是<em>第一名</em>②块级标签：会独立成为一行，不和其他标签共享一行。
HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后
（3）嵌套
一个标签中可以写另一个标签：行内嵌套行内，块级嵌套行内，块级嵌套块级
行内不可以嵌套块级，行内会失效
<!--行内嵌套行内-->
我是<em><strong>第一名<strong/></em>4.属性
标签的属性有四种语法：属性的值可以用双引号(最常用)或者单引号或者不加引号（不建议）或者不赋值
但同类型的引号是不能嵌套的，比如内容本身有双引号，外面只能用单引号
name='Bill "HelloWorld" Gates'
属性总是以名称/值对的形式出现，比如：name="value"
（1）常规属性（有值）
属性是作用在标签上的，属性不会直接作用在内容上
- 超链接：
- href属性：表示跳转到哪个网址
- title属性：给元素添加提示信息，鼠标悬停时可以提示内容
- target属性：_blank 让页面在新的窗口打开，_self在当前页面加载（默认）
- 可以给图片、标题添加超链接
<a href="https://developer.mozilla.org/zh-CN/docs/Web" title="这是web开发文档" target="_blank">这是链接</a>- 锚（HTML书签）：跳转到一个页面的指定位置
也可以用id命名：<h2 id="C4">第四章</h2>
（2）布尔属性（无值）
是属性的一种简化写法，常见于表单标签中，没有值，比如下面的disabled
<!--表示输入框不可用-->
<input type="text" disabled> 请输入名字（3）style样式属性
利用style属性代替HTML4中的一些标签和属性
<body style="background-color:yellow">
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<h1 style="text-align:center">This is a heading</h1>5.元素和空元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- 元素的内容是开始标签与结束标签之间的内容
- 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）
- 没有内容的 HTML 元素被称为空元素，比如<br>定义换行，<hr> 创建水平线。空元素是在开始标签中关闭的，在开始标签中添加斜杠，比如 <br />，<hr /> ，是关闭空元素的正确方法
- 关闭空元素时，斜杠（/）在 XHTML 和 XML 中是必需的
6.实体字符
（1）html中的字符
（2）空格的处理
无论写多少个空格，都会只展示一个空格，所以需要用实体字符
<p>My cat is very grumpy</p>当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
（3）其他字符
数学符号、表情符号都有固定的字符表示，以 &# 开头并以 ;（分号）结束实体编号
7.HTML结构
具有根结构、头结构、体结构标签
<!DOCTYPE html> 是最短的有文档声明-->,即 HTML 用什么版本编写的，此语句表示HTML5版本
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的测试站点</title>
</head>
<body>
<p>这是我的页面</p>
</body>
</html>（1）head元素
- meta标签（元标签）
用于指定元数据，即网页的描述，关键词，文件的最后修改时间，作者及其他元数据，不会显示在客户端。
字符集：字符和二进制在计算机中的存储关系，英文用ascii，中文用gbk，通用用utf-8(也是HTML5中默认的字符编码)
keywords是通过什么关键词可以搜索到此页面
description是在打开具体页面之前的一个简要概括内容
- <link>标签
定义文档与外部资源之间的关系。最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>8.列表（可以嵌套）
（1）无序列表
通过属性可以更换前面圆圈的样式，嵌套时自动更换图标
（2）有序列表
通过属性可以更换前面序号的样式，嵌套时不会自动更换图标
（3）自定义列表
9.语义化
语义：表示该标签的意义，比如h1表示一级标题
标签效果：给用户看到的效果，可以通过css控制样式
任何效果都可以通过控制标签实现，所以语义是最重要的
<em>和<i>标签都可以表示斜体，更推荐使用<em>，因为不止有斜体效果
<strong>和<b>标签都可以表示加粗，更推荐使用<strong>，因为不止有加粗效果
10.插入图片
插入本地图片或链接指向的图片，推荐本地图片，加载图片需要时间，慎用
一般不要直接修改图片的大小，会糊
alt属性：当图片无法展示时，设置的提示信息
图片和标题能够被组合在 <figure> 元素中：
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure> 11.相对路径和绝对路径
/ 根目录
./ 当前路径 可省略
../ 上一级路径
12.表格
（1）结构
（2）属性与样式
cellspacing：设置每个数据边框之间的距离
cellpadding：设置数据与边框之间的距离
<th>标签：对表头加粗居中
<caption>标签：定义表格标题
align属性：数据居中
bgcolor属性：设置背景颜色
（3）跨行跨列（单元格合并）
跨列操作
跨行操作
13.表单（收集用户输入）
（0）GET和POST
GET（默认）：表单数据在页面地址栏中可见，适合少量数据的提交。浏览器会设定容量限制。
？前面是请求传入的服务器地址，使用get请求时，密码会显示在地址中，因此密码不适合用get
action_page.php?firstname=Mickey&lastname=MousePOST：适合表单正在更新数据，或者包含敏感信息（例如密码）
（1）输入控件
<input type="text"> 定义用于文本输入的单行输入字段
文本框、密码框、文本域
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定
form action =#表示将数据提交到当前页面，如果省略 action 属性，也是提交到当前页面
type是前端识别的，name是给后端提供的，需要和后端的定义一致
（2）单选控件
<input type="radio"> 定义单选按钮
checked表示默认选中
name都指定为sex，表示在一组，从而实现单选，通过value值来决定传入后端对应是哪个值
（3）复选控件
<input type="checkbox"> 定义复选按钮
checked 属性规定在页面加载时选中该数据
也可以单独使用
（4）下拉控件
（5）文件上传控件
get允许提交的数据量比较小，post允许提交的数据量比较大。文件数据量比较大，用post
（6）隐藏域控件
提供用户不需要看到，但后端需要的数据。比如添加“输入”操作的指令act=input
（7）按钮控件
提交按钮、重置按钮（可以清空输入框的内容）、普通按钮（可以通过js绑定功能）
（8）控件禁用
禁用之后可以用value值回写，禁用的数据是不会随着请求提交的
14.常见标签
（1）标题标签
<h1></h1> <h2></h2>.........字体大小不同
（2）段落标签
<p></p>
（3）label标签
当点击用户名时，光标会跳转到输入框，for表示跳转到哪里，需要和id对应起来
五、其他
1.颜色
仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果使用其它颜色的话，就应该使用十六进制的颜色值。
2.内联框架
iframe 用于在网页内显示网页
frameborder 属性规定是否显示 iframe 周围的边框
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>当链接的 target 属性引用 iframe 的 name 属性时，会在iframe中显示链接的页面
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>3.响应式web设计（RWD）
（1）自己创建
（2）使用 Bootstrap
使用现成的 CSS 框架，帮助开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机
4.URL
扫一扫
4727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
