html&&css
html&css
html
概念
Hyper Text Markup Language 超文本标记语言
超文本：
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以链结到其他位置或者文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多，最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式
标记语言:
由标签构成的语言。
标记语言不是编程语言
语法
-
html文键后缀名 .html 或者 .htm。
-
标签分为：
围堵标签：有开始标签和结束标签。
自闭和标签：开始标签和结束标签是同一个。 -
标签可以嵌套：
标签的嵌套是包含关系，不是交叉关系，不能你中有我，我中有你 -
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
-
html不区分大小写，但是建议使用小写。
html常用的标签
文件标签
文件标签是构成html最基本的标签
html：html 文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签
<!DOCTYPE html> <!--此标签定义此文档是html文档-->
<html> <!--根标签-->
<head> <!--头标签包含文档的各种属性和信息，包括文档的标题-->
<meta charset="UTF-8">
<title>Title</title> <!--文件的标题-->
</head>
<body>
<!--定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）-->
</body>
</html>
文本标签
处理文本的标签
h1 h2 …到h6：标题标签，h1~h6:字体大小逐渐递减小
p：段落标签
br：换行标签
hr：展示一条水平线
b：字体加粗
i：字体斜体
font:字体标签 规定字体样式，大小，颜色
center:文本居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<p>段落一</p>
<p>段落二</p>
我被<br>换行了
<hr>
<b>被加粗</b> <br>
<i>倾斜</i> <br>
<font size="50" face="楷体" color="red">规定字体样式，大小，颜色</font> <br>
<center> 文字居中</center>
</body>
</html>
图片标签
img
<img src="图片的地址">
列表标签
有序列表：
ol li
无序列表：
ul li
<!--有序列表-->
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>上网</li>
</ol>
<!--无序列表-->
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>上网</li>
</ul>
链接标签
a
属性：
href：指定访问资源的URL
target：指定打开资源的方式
_self：在当前页面打开
_blank：在空白页面打开
<a href="http://www.baidu.com">百度</a>
表格标签
table：定义biaoge
tr：定义一行
td：定义一行里面的一个单元格
<table >
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<th>18</th>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<th>21</th>
</tr>
</table>
表单标签
form
作用：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：
action：指定提交数据的URL
method:指定提交方式，常用的方式为post get
表单项标签
input：可以通过type属性值，改变元素展示的样式
常用属性：
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
css
概念： Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
1. 功能强大
2.将内容展示和样式控制分离
降低耦合度。解耦
让分工协作更容易
提高开发效率
作用：页面美化和布局控制
CSS与html结合方式
语法
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器
作用：筛选具有相似特征的元素
基础选择器
其他常用选择器