HTML基础标签

1.基础框架

<html> </html> 整个HTML文件中只能有一个；所有的标签都必须包含在该标签中。

<head> </head> 内容一般不展示给用户看；主要包含元素<link>,<script>,<sytle>,<title>其中<link>单标签

<body> </boyd> 用来显示用户看的信息；一个html 中只能有一个body标签。

2.基础标签

h标签

给文本添加标题语义而不是修改文本样且独占一行；h标签共有6个，从h1到h6，超过6个无效。

p标签

段落标签，p标签中的内容独占一行，内容超出时自动换行.

br标签：单标签

强制换行

a标签

实现界面跳转，能点击跳转的基本都是a标签。

语法 :<a href=“属性”></a>.

属性：一.href(必要属性)可选值 1.外部服务器资源；2.本地资源；3本界面跳转

1.外部资源的跳转

2.本地资源的跳转

3.本界面跳转

（给跳转的元素设置id；href="#id"）

如:返回顶部，<a href="#" id="top"></a>

二.target(可选)1. _self（默认值)在本界面实现跳转 2. _blank在新窗口实现跳转。

三.title（可选）鼠标悬停提示信息。

注：a标签中必须要有内容，否则看不见。

img标签

（单标签）在网页上插入一张图片。插入路径 1.网络路径 2.本地路径

属性:1.src 告诉浏览器图片插入路径；2.alt 当图片路径不存在或者其他与原有无法显示时，显示alt指定的文本；3.title鼠标悬停提示信息（文本）3.width 设置图片显示高度 4.height设置图片显示高度

div标签

一个没有任何语义的通用元素，主要用于搭建界面的整体架构。

span标签

双标签，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上

列表

1.无序列表 ul .应用场景：导航条、商品列表、新闻列表

说明：内容没有先后之分；浏览器会 ul 自动添加小圆点，但是一定一定千万千万要记住，ul的作用并不是给文字添加小圆点，而是增加无序列表的语义；li标签不能单独存在，必须包裹在ul里面；

2.有序列表 ol 列表中的条目有先后之分。

一般ol能做的，用ul都可以实现。

3.定义列表 dl 应用场景网站底部相关信息

dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签

表格

1.table定义单元格；2.tr定义行；3.td定义单元格

属性：1.border 表格边框宽度（默认为0看不到）

2.width 表示表格宽度；默认情况下表格宽度有内容自动计算；可以通过width属性设置宽度。

3.cellspacing 外边距默认情况下单元格之间有2px间隙，

4.cellpadding 内边距默认1px

5.align 设置对齐元素取值center、left、right.

6.bgcolor 设置表格背景颜色

注：

表单中有两种类型的单元格，一种是标准单元格td，一种是表头单元格th

th标签：给每一列设置标题，单元格中的内容会自动加粗、居中

caption标签：给整个表格设置标题一定要嵌套在talbe标签内部才有效

合并单元格

横向合并

colspan：合并当前行的哪几个单元格，注意colspan只会向后合并，不会向前合并。

例如：

说明：把当前单元格当做两个单元格来看待

纵向合并

rowspan:合并当前列的哪几个单元格，注意rowspan只会向后合并，不会向前合并。

例如：

说明：把当前单元格当做两个单元格来看待

表单

form表单一个跟用户进行交互的标签；向服务器提交数据，所有的表单内容，都要写在form标签里面

一.input 标签

1.text 明文输入框

<p> 账号：<input type= "text"/> </p> 1.1 给输入框设置默认值 <p> 账号：<input type= "text" value="xxx"/></p> 1.2 规定输入字段中的字符最大长度 <p> 密码:<input type="password" maxlength="15"/></p>

2.password 暗文输入框

<p>密码:<input type="password"/></p> 也可以指定默认值，也可以指定最大长度。

3.radio 单选框

篮球<input type="radio" name="a" value="basketball">足球<input type="radio" name="a" value="">皮球<input type="radio" name="a" value="">排球<input type="radio" name="a" value="">铅球<input type="radio" name="a" value="">

说明：value属性后期服务器获取值时才会用到

4.checkbox 多选框

最好也是有相同的name（虽然他不需要互斥）

篮球<input type="checkbox" name="a">足球<input type="checkbox" name="a">皮球<input type="checkbox" name="a">排球<input type="checkbox" name="a">铅球<input type="checkbox" name="a">

5.button 按钮

image 图片按钮

7.textarea 多行文本框

textarea标签用于在表单中定义多行的文本输入控件

8.file 文件上传

单文件上传<input type="file"/>多文件上传<input type="file" multiple/>只上传图片<input type="file" accept="image/*">

9.reset 重置按钮

<input type="reset" value ="重置"/>这个按钮不需要写value自动就有“重置”文字reset只对form表单中表单项有效果

10.submit 提交按钮

如 <form action="http://www.baidu.com" method="get"> 账号: <input type="text" name="user"/><br> 密码: <input type="text" name="psw"/><br> <input type="submit"/></form

二.button

三.textarea

四.select 下拉框

1，属性disable：禁止选中

2、属性select=“selected”：默认选中

<select id="cars"> <option value="benz">奔驰</option> <option value="bmw">宝马</option> <option value="audi">奥迪</option> <option value="landrover">路虎</option> <option value="maserati">玛莎拉蒂</option> <option value="bentley">宾利</option> <option value="lamborghini">兰博基尼</option></select>请输入你的车型: <input type="text" list="cars">

公共属性

name:定义提交数据的keyvalue:给表单元素赋默认值checked:单选跟多选，选中piaceholder:输入框的提示信息required:必须填写的disabled:禁止输入

多媒体

CSS

<style>

ul {

list-style: none;

}

</style>

去除 ul 自带小圆点

<style>

.a{

text-decoration : none

}

</style>

去除a标签下划线

选择器

id选择器

CSS：#id_test {}（#+id属性值{}）

HTML：<div id="id_test">天青色等烟雨</div>

class选择器

CSS：.class_test {}（.+class属性值{}）

HTML：<div class="class_test">天青色等烟雨</div>

标签选择器

CSS：div {}(标签名{})

HTML：<div>天青色等烟雨</div>

万能选择器

CSS: * { }

子元素选择器

（只能设置子代元素）

选择器 > 选择器 { }

后代选择器

（所有后代元素）

选择器1 [空格] 选择器2

伪类选择器

盒子模型