HTML个人学习笔记

1. HTML

HTML的全称为超文本标记语言，是一种标记语言

1.2 语法

标签:由开始标签和结束标签组成 自闭标签
属性:每个标签都可以设置属性
注释:< !-- 注释 – >
空格: &nbsp ;
回车: < br/ >

1.2常用标签

标题标签：

< h1 >< /h1 > h1(大)~h6(小)

列表标签：

有序：< ol >+< li >
无序：< ul >+< li >
type属性可以设置列表前符号

图片标签：

< img >< /img >
属性：src 用来指定图片位置，width 设置图片宽度，height 设置图片高度，单位是像素px

超链接标签：

< a href="…" >< /a >
属性：href 用来跳转到指定网址,target 用来指定打开方式(默认_self,新窗口_blank)

锚定：使用a标签回到顶部
< a name=“top” >顶部< / >
< a href="#top" >回到顶部< /a >

input标签：

实现输入各种类型的数据

1. < input type=“text”/ > < !-- 普通文本-- >
2. < input type=“password”/ > < !-- 密码-- >
3. < input type=“number”/ > < !–纯数字-- >
4. < input type=“button” value=“点我”/ > < !-- 按钮-- >
5. < input type=“radio” name=“sex” value=“1”/ >男 < !-- 单选-- >
6. < input type=“radio” name=“sex” value=“0”/ >女 < !-- 单选-- >
7. < input type=“checkbox”/ name=“city” value=“1” > 选项1 < !-- 多选-- >
8. < input type=“checkbox”/ name=“city” value=“2” > 选项2 < !-- 多选-- >
9. < input type=“submit”/ > < !-- 提交按钮-- >
10. < input type=“reset”/ > < !-- 重置按钮-- >
11. < input type=“email” / > < !-- 邮箱-- >
12. < input type=“date” / > < !-- 日期 年月日-- >

表格标签：

在页面插入表格

< table >
< tr > < !-- 行 – >
< td >< /td > < !-- 列 – >
< /tr >
< /table >
属性：< table > border=“1px” 表格边框 cellspacing=“1px” 单元格间距
bgcolor 背景色
< td rowspan=“2”> 合并2行
< td colspan=“2” > 合并2列

表单标签：

用来向服务器提交数据，想要提交数据必须给form内需收集数据标签配置name属性

< form method=“get” action="#">
< table >
< tr > < !-- 行 – >
< td >< /td > < !-- 列 – >
< /tr >
< table >
< /form >
属性：
method=“get” 提交的数据都在地址栏显示，不安全，有大小限制
method=“post” 看不到提交的数据，安全，没有大小限制
action="#" 提交到指定位置，#未指定

下拉框标签：

< select name=“city” >
< option value=“1” >北京< /option >
< option value=“2” >上海< /option >
< /select >

其他标签：

音频标签：
< audio controls=“controls” > < !-- 属性controls为使用默认控件 – >
< source src="…" >
< /audio >
视频标签：
< video >
< source src="…" >
< /video >
属性：controls使用默认控件，src文件路径
段落标签：可以输入大量文字
< div >< /div >
< p >< /p >
< span >< /span >

< div >,< p >,< h1~h6 >属于块元素(默认自动换行)，
< span >,< input >,< a >,< img > 属于行内元素(默认不换行)

2. CSS

层叠样式表，用来修饰网页效果的语言

2.1 语法

选择器{ 修饰的效果 }
body{ width : 500 ; bgcolor : red ; }

2.2 用法

1）在 HTML 标签中使用style属性

< div style=" color:red ; font-size : 30px ; "> 测试 < /div >

2）在 head 标签内部使用style标签

< head >
< style >
div{
color : blue ;
font-size : 30px ;
}
< /style >
< /head >

3）在 head 标签中使用 link 标签引入 css 文件

创建css文件，在css文件中设置选择器和属性
在html文件中通过< link >引入css文件
< link rel = " stylesheet " href = " css文件路径 " / >

2.3 选择器

标签名选择器：通过标签名修饰标签效果

div { 属性1：值 ；属性2：值 ； }

class选择器：给标签添加class属性，通过点操作符 " . " 调用class属性的标签来修饰标签效果

. class值 { 属性1：值 ；属性2：值 ； }

id选择器：给标签添加id属性，通过 " # " 调用id属性的标签来修饰标签效果

#id值 { 属性1：值 ；属性2：值 ； }

分组选择器：用不同的选择器选中多个标签来修饰标签效果

.class值 , #id值 , div { 属性1：值 ；属性2：值 ； }

属性选择器：按照标签属性的值选中标签来修饰标签效果

input [ type = " text " ] { 属性1：值 ；属性2：值 ； }

2.4 盒子模型

将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离、边框以及盒子边框和盒子内容的距离都可以设置。

border ：盒子的边框,可以设置粗细 颜色 实线/虚线 border:2px dashed red;
padding:：容和边框的距离 padding:20px;
width、height：设置内容的宽度高度 width:10px;height:10px;
margin：盒子和盒子的距离 margin:10px;