HTML基础
一：基础
HTML（Hyper Text Markup Language）：超文本标记语言
目前学习最新的版本：HTML5.
优点：1，智能代码补全 2，代码提示 3，自动保存 4，多个浏览器支持
用来表达网页而用来编辑的程序：nootpad，写字板，记事本，webstrom
W3C：外围网联盟
W3C标准：
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
开始工作：
File----new---HTML file（建立一个html文件）
File----new---direction（建立一个文件夹）
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题（h1-h6都是标题标签，h1字体最大，h6字体最小）
<p> 与 </p> 之间的文本被显示为段落
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
文本样式：
水平线：<hr> --------------------------------------------------------------------------
<em>斜体</em> <em>我的世界</em> 我的世界
<Strong>加粗</Strong> <Strong>我的世界</Strong> 我的世界
标签属性：
添加图片：语法：<img src="相对路径/绝对路径" alt="">（现在多用相对路径）
../用于返回上一级 ../../用于返回上一级的上一级
超链接文本：用a标签 语法：<a href="">内容</a> 出现的是：内容
注：英文“”中间可以用自身窗口（self）：就是在原本的网页打开你想要的内容
也可以用新建窗口（blank）：就是原本的网页不变，新建一个网页窗口
添加视频：语法：<video src="相对路径" controls></video> 里面的相对路径和上面相同的道理，controls这个是视频的功能键，加上这个会看到这个视频的播放，快进，音量等功能键。
添加音频：语法：<audio src="相对路径" controls></audio> 同上。
Source ：标签
Src： 属性
autoplay ：自动播放
注释和特殊符号：
空格： ；
大于号：>； 内容+符号+内容
小于号：<； 内容+符号+内容
引号："； 必须用承兑的"；引起来
版权符号：©；
二：属性：
header 标题头部内容----------------页面中的一块
footer 脚部区域内容-----------------整个页面
section web页面一块独立区域
article 独立文章内容
aside 相关内容-------------------------侧边栏
nav 导航类辅助内容
内容属性：style：
设置边框尺寸：width宽 height 高
font-family：字体 font-family：楷体； 宋体：（我的世界）楷体（我的世界）
font-size：大小 font-size：20px； 我的世界（字体默认大小为16px）
font-style：风格 font-style：italic；（斜体） 我的世界（默认为normal：正常）
font-weight：粗细 font-weight：200px； 我的世界（输入的数字为1-900正整数）
Color：颜色 color：red 我的世界
注：color后面有三种表达方式：1，英文red 2，十六进制# 3，RGB三原色设置
文本属性：
text-align：对齐方式 center居中 right偏右 left偏左
text-indent：首行缩进 一般用10px，如果是在段落中用2em。
line-hight：行高
text-decoration：文本装饰 underline下划线 line-through中划线 overline上划线
None没有
Padding 内边距 margin 外边距
伪类语法：
a：hover{
Cursor:
}
Cursor鼠标 water 等待 move 移动 pinter 小手 crosshair 十字光标 alias 跳转
All-scroll 移动 auto 文本符
Div标签
Background：背景
Background-color颜色
Background-repeat：是否平铺
Background-position：背景定位
Background-image：ur”相对路径”
去小圆点：
*{
Padding：0；
Magrin：0
}
line-height：30px；设置行高，这样可以让内容居中
text-decoration：none；这样去下划线
三：列表
列表：
无序列表：
<ul>
<li>1</li> ·1
<li>2</li> ·2
<li>3</li> ·3
</ul>
有序列表：
<ol>
<li>桔子</li> 桔子
<li>香蕉</li> 香蕉
<li>苹果</li> 苹果
</ol>
自定义列表（现在不用）
<dl>
<dt>所属学院</dt>
<dd>计算机应用</dd>
<dt>所属专业</dt>
<dd>计算机软件工程</dd>
</dl>
表格的语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
……
</tr>
……
</table>
补充type=squarc正方块 circle 空心圆
Table表格容器： tr行 td列
Rowspan行合并 colspan列合并
表单的结构：
姓名：<input type="text"><br> text文本框
信息：<input type="text"><br>
密码：<input type="password"><br> password密码框
<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
Radio单选框 label是如果点在字上也能选中。
<input type="checkbox" id="tile"><label for="tile">同意此协定</label>
Checkbox同意框
<select name="" id="">
<option value="">请选择</option>
<option value="">事业部</option>
<option value="">技术部</option>
<option value="">人事部</option>
<option value="">财务部</option>
</select>
Select这个结构是用来选择
<input type="submit" value="登陆">
<button>登陆</button>
登陆注册框的两种不同写法
<textarea name="" cols="30" rows="10"></textarea><button>提交</button>
评论框
四：选择器：
并集选择器：多个选择器通过逗号连接而成，同时声明多个风格相同样式。
交集选择器：由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格。
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。
后代选择器：外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔标签嵌套时，内层的标签成为外层标签的后代。
子元素选择器：通过>连接在一起而成，仅作用于子元素。
属性选择器：选取带有指定属性的元素，或选取带有指定属性和值的元素。
盒子类型：
上边框样式：border-top-style
右边框样式：border-right-style
下边框样式：border-bottom-style
左边框样式：border-left-style
设置四个边框样式：border-style
none：无边框
solid：实线边框
dashed：虚线边框
dotted：点状边框
double：双线边框
hidden：与none相同，应用于表解决边框冲突
来源：https://www.cnblogs.com/liurui-bk517/p/11074047.html