|
1.HTML基础
1.1什么是标记语言
文本文件：只保留文字内容，不保留文字格式。
Word中：即可以保存文字内容又可以保留文字格式。
比如：在.txt文件中和在word文件中输入同样的内容，设置同样的格式，全部发到另一台计算机时，出现了txt文件只有文字内容没有格式，而word保留了内容和样式
Word文档就是标记语言的一种，而现在要学习的就是HTML（HyperText Markup Language ）也是 一种标记语言，叫做超文本标记语言。
超文本标记语言：不光可以保存文字信息，还可以保存音频、视频内容等。
在我们浏览网页时，其实是将储存在服务器上的HTML文件下载到本地，在通过浏览器进行解析，从而呈现了网页内容。
2..HTML的基本结构
<html>
<head>
<meta charset=UTF-8><!--设置字符集 用什么编码来解析-->
<title>FIRST HTML</title> <!--设置标题-->
</head>
<body>
<h1>王明臣是最帅的</h1>
<h1>吕佳伟是最帅的</h1>
<h1>杨小军是最帅的</h1>
<h1>李高伟是最帅的</h1>
</body>
</html>
HTML的基本结构包括三大部分： <html>标签：是整个目录的根节点，包含了两个子节点。
<head>标签：文档的主要设置一些写代码时需要做的设置工作，比如字符集，标题。
<body>标签：文档的主体部分，在页面要呈现的内容都在这里。
<meta content="utf-8">//设置字符集 用什么编码来解析
<title>Title</title> //设置标题
3. HTML的基础标签
3.1标题标签
常用的标题有<h1>到<h6> 从大变小；用于显示页面的标题，包含了标题的格式。语意信息等内容。
<body>
<h1>这里是标签1</h1>
<h2>这里是标签2</h2>
<h3>这里是标签3</h3>
<h4>这里是标签4</h4>
<h5>这里是标签5</h5>
<h6>这里是标签6</h6>
</body>
3.2段落标签
<p>段落标签：标示页面中的一个段落
<body>
<h3>静夜思</h3>
<p>床前明月光</p>
<p>疑似地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
3.3链接标签
<a href =”#”>标签，作用就是页面跳转，包括页内跳转和页间跳转
href属性：连接的目标地址：
Target 属性： 控制页面跳转的方式，其取值有四个：
_blank 页间跳转 在新的页面打开
_self 页内跳转 在当前页面打开（默认的打开方式）
_top
_parent
<a href="https://www.baidu.com/" target="_self">跳转到百度</a>
2. 页面跳转
要给“目的地”设置一个id，在<a>标签中的href属性里边使用“#...(id名)”实现页内头部和尾部的跳转。
Id属性具有唯一性，是页面元素中的唯一标识，id名不能重复。
3.4 图片标签
<img>图片标签：在网页中插入图片。
<img src="img/徐璐1.png" alt="">
<img src="网络图片地址" alt="">
图片可以从本地载入，也可以从网页中载入，本地载入时要找到图片的存储地址，在网页载
入时要找到图片的网络地址。
路径：
相对路径：
。。/上一级目录
/下一级目录
，：同级目录，这个“”可以省略。
3.5列表
列表在word
有序列表
<ol>标签定义一个有序列表
<li>标签定义一个列表项
type属性：它指定了列表符号的种类包括：
1、2、3、4、5........
a、b、c、d、f........
其他的符号种类（自己去试一下）
Start属性：指定了列表开始的位置，也就是从第几个开始，而不是从几开始。
<ol type="a" start="2">
<li>李高伟</li>
<li>是男神</li>
<li>不解释</li>
<li>拒反驳</li>
<li>帅炸裂</li>
</ol>
无序列表在html中：
<ul>标签定义一个无序列表
<li>标签定义一个列表项
type属性指定了无序列表的符号，取值有：
disc： 实心圆 （默认）
circle：空心圆
aquare：实心正方形
<body>
<ul type="disc">
<li>我</li>
<li>是</li>
<li>李</li>
<li>高</li>
<li>伟</li>
</ul>
</body>
结果：
自定义列表html中：
<dl>标签定义一个自定义列表
<dt>标签列表的标题
<dd>标签列表的描述
<dl>
<h2>中国各省份</h2>
<dt>河南</dt> <!--列表中的标题-->
<dd>对河南的描述（此处省略一万字）</dd><!--列表中的项-->
<dt>浙江</dt>
<dd>对浙江的描述（此处省略一万字）</dd>
</dl>
4表单
4.1表单
什么是表单，表单就是收集填写信息后提交到后台服务器。
<form>标签定义一个表单。
Get 和post 的不同
定义一个密码输入框：
<input type="password" name="password">
Lable的作用，可以对其单独进行样式设置，同for属性可以和某一个Input标签进行关联。
<lable for="user">用户名： </lable>
单选框：checked 默认选
<input type="radio" name="role" value="1" checked>学生
多选框：
<input type="checkbox" value =”1”>
普通按钮：
<button></button>
文件选择框：
<input type="file">文件
下拉列表：
<select name="" id="">
<option value="1">s</option>
<option value="2">d</option>
<option value="3">d</option>
<option value="4">f</option>
</select>
多文本框：
<textarea name="" id="" cols="30" rows="10">fgasd
</textarea>
Css的书写方式
内联样式
<p style="color: #FF0000">一段文字</p>
内部样式
<style> <!-层叠--->
/*元素选择器*/
html{background: wheat;}
p{color: red;}
/*类选择器*/
.first{color: green;}
/*id选择器 id命名是唯一的 */
#sec{color: blue;}
</style>
权限优先级：id选择器>class选择器>元素选择器
外部样式（外链样式）
建立.css文件
<link rel="stylesheet" href="dfgs.css" type="text/css">
/* 路径 */
html{background: wheat;}
/*元素选择器*/
p{color: red;}
/*类选择器*/
.first{color: green;}
/*id选择器*/
#sec{color: blue;}
层叠优先级：内联>内部>外部
字体属性：
<style type="text/css">
.text{font-size: 20px; /*字体大小*/
font-style: italic;/*斜体*/
flood-color:blue ; /*字体颜色*/
font-weight: bold;/*字体样式*/
font-family: 黑体;/*字的字体*/
}
</style>
段落相关属性：
.text{
/*行间距（行高），字符间距，首行缩进，对齐方式，文本修饰*/
line-height: 40px;
word-spacing:80px;
text-indent: 50px;
text-align: center;
text-decoration: underline;
}
尺寸相关属性:
.d1{
width: 100px;
min-height: 100px; //最小高度 auto 自适应
max-height: 300px; //最大高度
background-color: #FF0000;
}
盒子模型：
外边距：
内边距：
边框：
父子元素之间的留白，用父元素的padding，兄弟之间的留白用margin
块级元素的居中margin ，0 auto ；
Display
显示模式布局： display
代码中空格和回车会被当成字符显示在页面上，
基线对齐
对齐方式是在父元素中设置。
Float
Clear：both 消除浮动对兄弟元素的影响
Overflow：hidden 本意是超出部分隐藏，在这里，我们用作消除浮动时对父元素产生的影响。
相对定位：
position: relative;
left: 200px;
top: 100px;
相对于原来的位置进行定位
绝对定位：
相对于最近的一个拥有定位属性（除static以外）父类元素定位，父相子绝。脱离原有的文档流（原来的位置不见了）
固定定位：
相对于浏览器窗口固定 （原来的位置不见了） | 
转播
