HTML5
先写好代码，再重命名把文本格式改为html，（刚开始我没有成功是因为文件没有显示拓展名所以改不了）。
先来一个最简单的
<!DOCTYPE html>
<html>
<head>
<title>第一个小测试</title>
</head>
<body>
<h1>hello world</h1>
<p> 哇哇哇</p>
</body>
</html>
打开后：
再HTML5之前的申明都比较长，但是之后会一直使用这个，也比较简单。
每个命令都有开始和结束两个标签，结束标签会带有一个/。
为最大的标签，两个之间的任何东西称为html元素，html 元素用于告诉告诉浏览器其自身是一个 HTML 文档。 表示标题，内容会出现在最上面的标题栏。 表示网页的主题内容，body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。开发工具：VScode
从官网下载安装很快，如果要将字体设置为中文，可以在里面下载中文包。
按下快捷键 ctrl+shift+x ,找
重启后就是中文了。
打代码前直接点开始菜单里的保存，将格式改为html,保存后打一个英文的叹号就可以直接出现大的框架：
其中<!DOCTYPE html>代表语言类型，这条语句写在最上面
<html lang="en">
language = English
最好改成 <html lang="zh-CN"> 代表中文网站
<meta charset="UTF-8">
字符集为 UTF-8 这个字符集基本包括了所有的语言
标题标签
-
标签可定义标题，
定义最大的标题。
定义最小的标题。
<!DOCTYPE html>
<html>
<head>
<title>第二个小测试</title>
</head>
<body>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</body>
</html>
标题的字体都是粗体，独立一行显示
<p> <\p> 标签用于定义一个段落，编辑时文本换行了编译后还是会连在一起，分段必须用(paragraph缩写)
<br\> 强制另起一行，这是一个单标签（break缩写）
<!--...--> 用来在源文档中插入注释。注释不会在浏览器中显示。
文本格式化
div 和 span
表示这是一个独一的区块。 div相当于加了一个换行符，span差不多是一个空格。
图像标签
是一个单标签。
<img src=" " alt=" " title = "" width="" height = "" border = "">
- src 后面跟图片路径
- alt 后面跟 若图片不能显示而显示的替换文字
- title 后面跟鼠标悬停在图片上显示的文字
- width 宽度 单位像素
- height 高度 单位像素 如果只改宽度和高度的一个属性，是等比缩放的
- border 为边框的宽度 单位：像素
超链接标签
<a href = "要跳转的目标网站 target="（打开链接网站的方式）"> 超链接的文字或图像</a>
target = “_blank” 表示打开一个新的网页
不写默认 target = “_self” 表示在本页面上直接跳转到目标网页
外部网站前面要加http:\,内部链接写html的地址，若写的是文件的地址，点击超链接将会下载文件
锚点链接
在链接文本的 href中设置属性值为#名字的形式，然后在目标标签中添加id属性，值为刚刚设置的名字。如：
<a href = "#name">文字 </a>
<h3 id = "name"> 文字 </h3>
特殊字符
- 空格
 : - 小于号
< - 大于号
> - &符号
& - 等等
表格
<table>
<tr> <td>姓名</td> <td> 朝代</td> </tr>
<tr> <td>李白</td> <td> 唐</td> </tr>
<tr> <td>张飞</td> <td> 三国</td> </tr>
</table>
各个标签是父子关系，table是表格，tr是一行，td是一个单元格
把第一行的 td改成 th 代表是表头，会居中加粗文字
表格的属性设置
在第一个table标签进行设置
<table align = "left/center/right" border = "默认为空，/1" cellpadding = "" cellspacing = "" width = "" height = "">
align 表示表格在页面显示的位置， border 设置是否有边框， cellpadding 为单元边沿与内容的空白，默认1像素，cellspacing为单元格之间的距离，height与width为表格的高与宽。
定义表头与表体
<table>
<thead>
<tr> <td>姓名</td> <td> 朝代</td> </tr>
</thead>
<tbody>
<tr> <td>李白</td> <td> 唐</td> </tr>
<tr> <td>张飞</td> <td> 三国</td> </tr>
</tbody>
</table>
合并单元格
在具体某个单元格选择合并方式，然后删掉多余的单元格。
<td colspan = "要合并的单元格的数量"> # colspan表示跨列合并， rowspan表示跨行合并。
无序列表
<ul>
<li> 第一个</li>
<li>第二个</li>
<li>....</li>
<!-- unordered list list -->
</ul>
有序列表
<ol>
<li> 第一个</li>
<li>第二个</li>
<li>....</li>
<!-- ordered list list -->
</ol>
自定义列表
<dl>
<dt> 总</dt>
<dd>分1</dd>
<dd>分2</dd>
<dd>分3</dd>
</dl>
表单
表单的作用是上传数据。
表单域：
<form action="处理表单数据的url地址" method = "提交方式（get或post）" name="表单的名字">
</form>
表单元素
<form action="处理表单数据的url地址" method = "提交方式（get或post）" name="表单的名字" >
文本框<input type="text" name="" value="默认显示的文字" maxlength="20"> <br>
密码框<input type="password" name="" value=""><br>
单选按钮<input type="radio" name="id1">选项1<input type="radio" name = "id1"> 选项2<br>
<!-- 单选按钮要设置一样的name属性 -->
多选框 <input type="checkbox" name="同一组选项name属性相同">选项1<input type="checkbox">选项2<input type="checkbox">选项3<br>
<!-- 对于选项框可以设置checked属性 -->
默认选择<input type="checkbox" checked="checked"><br>
提交按钮 <input type="submit" value="提交"><br>
重置按钮 <input type = "reset" value="重置按钮"><br>
按钮<input type="button" value="按钮"><br>
上传文件 <input type="file">
<!-- Label标签可以绑定表单元素，当点击标签时光标会自动聚焦与按钮或文本框，增加用户体验。 -->
<label for="要服务的对象id"> label内容 </label>
<input type="text" id="要服务的对象id"><br>
<!-- 下拉表单元素 -->
选项<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select><br>
文本域<textarea rows = "3" cols="20">
</textarea>
</form>
</body>
CSS3
写在<head>与</head>之间
<style>
标签选择器 {
属性: 值
属性: 值
}
</style>
类选择器
先在上面定义一个类，然后需要的调用。格式：
<style>
.red {
color: red;
}
</style>
<p class="red">
添加类
</p>
<!-- 多个类在class=""的引号里以空格隔开 -->
}
id选择器
格式：
<style>
#red {
color: red;
}
</style>
<p id="red">
添加类
</p>
<!-- 每个对象的id应当是不同的，所以只能被调用一次，可以用来给某个对象添加特殊的样式 -->
通配符选择器
格式：
<style>
* {
color: red;
}
</style>
<!-- 所有对象都会改变 -->
字体样式
<style>
* {
/* 字体 */
/* 用逗号隔开表示如果浏览器不支持第一个再用第二个，若字体有大于两个单词就用一个引号 */
font-family:'Courier New', Courier, monospace;
/* 字体大小，后面加px */
font-size: 50px;
/* 字体粗细 */
font-weight: 700;
/* 斜体 */
font-style:italic;
/* 对齐方式 center ledt right*/
text-align: center;
/* 字体装饰 上划线删除线下划线等还可以加颜色*/
text-decoration:yellowgreen underline;
/* 首行缩进 */
text-indent: 20px;
/* text-indent: 2em; 代表缩进当前字符大小*2 */
/* 行间距 */
line-height: 15pt;
}
</style>
样式表
以上使用的都属于内部样式表
如果要做的修改比较简单，可以使用行内样式表：
<p style="color: red; font-size: 30pt;">
行内样式表
</p>
外部样式表
将css内容写在一个css文件中，然后链接起来。
<link rel="stylesheet" href="css文件路径">
Emmet语法快速生成代码
- 生成多个相同的标签 例：
div*5 - 生成成对的有父子关系的标签 例：
ul>li - 兄弟关系 例
div+p - 生成带有类或id名字的
.类名 或 #id名 # 默认是div 可以写 p.类名 - 有顺序命名
div$*5 - 带有内容
p{内容}
符合选择器
后代选择器
<style>
父 子{
}
</style>
9183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
