HTML与css语法笔记
HTML:Hyper Text Markup Language
超级 文本 标记 语言
web
C/S：Client Server
客户端 服务器
QQ,...
B/S：Browser Server
浏览器 服务器
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<b></b>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<hr/>
<br/>
<img src="路径"/>
<div> 布局 </div>
<p> </p>
<sup></sup>上标
<sub></sub>下标
<u></u> 下划线
<span style="color:red;"> XXX </span>
<a href="https://www.baidu.com">链接</a>
<是 < >是 >
  空格键
© 圈c
<pre> 保留源文档的格式 </pre>
</body>
</html>
Bgcolor :背景颜色 Background :背景图片
cellpadding内边距
cellspacing外边距
colsppan 合并列
rowspan 合并行
style 定义行内样式
id:定义元素在页面中的唯一标识
title:鼠标移入到当前元素时，所提示的文本
class:引用的样式的类名称
属性：align
块级元素中可以嵌套所有的行内元素
p标记是不允许嵌套其他块级元素
div：允许嵌套所有的元素
div没有特殊情况是不允许被其他元素嵌套的
div 能嵌套div
td 能嵌套div
li 能嵌套div
dt,dd 能嵌套div
<ol> 有序排列
<li></li>
</ol>
无序排列
<ul>
<li></li>
<li></li>
</ul>
<fieldset>
<legend>xxxxx</ledeng>
</fieldset> 边框
<!--<a href="" target="_blank"新页面中打开
target="_self"当前页面打开 默认 title="" 名称
javascript:window.alert(asd)=跳转出提示框asd
href="文件"=下载文件>超链接</a>-->
<a href="#名字"></a>
<a name="名字"></a>
<a href="#">链接到顶端</a>
<!--<img src="" width=""宽 height="高"宽和高只设一个成等比缩放
title="设置的话如果图片不显示的话介绍图片，图片显示放图片上介绍"
alt="图片不显示的时候介绍图片>-->
<table>
<caption>设置表格的正中间</caption>
<!--<table width="宽" height="高" border="边框"
align="表格对齐方式"left=左 center=中间
right=右 bgcolor="背景颜色" cellpadding="边框与内容间的距离"
cellspacing="边框间的距离"-->
<!--<tr align="单元格水平" valign="单元格垂直"
top=上 middle=中间 bottm=下>-->
<!--<td widht="宽所有行的当前列的宽度，都将保持一致"
height="高当前行所有列的高度，都将保持一致"
colspan="设置单元的跨列向右合并" rowspan="设置单元的跨行向下合并"><th 和
td一样一加粗剧中的方式显示数据可称为行标题或列标题>-->
<thead>表头</thead>
<tbody>表主体</tbody>
<tfoot>表尾</tfoot>
<ol type="取值" start="从哪值开始">有序列表</ol>
<ul type="取值" 取值=disc（实心圆）circle（空心圆）
square=（方块）none=（无）>无序列表</ul>
<input type="button" value="按钮" onclick="alert(提示窗口)"/>
<button onclick="alert('点我啊')">点我</button>
点击按钮 点我 会弹出提示窗口（点我啊）
<section>元素
<section></section>=<div id="main"></div>用于定义文档中的节
特点：可以充当网页主体中的某一木模块
<aside>元素 可以表示主体内容的边栏部分
<aside id="left">左侧</aside>=<div id="left_side"></div>
<aside id="right">右侧</aside>=<div id="right_side"></div>
<article>元素
<article></article>=<div id="article"></div>
<article>文档的主体内容(用于描述文字性较强的内容)</article>
<header>定义网页的头部 网站标题 logo</header>=<div id="header"></div>
header 可以在网页多次出现 可以表示任何一部分内容的头部信息
<nav>元素
<nav></nav>=<div id="navigation"></div>
<div id="nav"></div>
负责定义页面的导航链接部分
<nav>
<ul>
<li></li>
</ul>
</nav>
<footer>元素
<footer></footer>=<div id="foot"></div>
出现在网页偏下段部分 用来定义网页文档的页脚部分内容
表单：
作用：用于显示收集信息，并将信息提交到服务器
<form></form>
特点:没有任何显示效果，默默的帮助网页完成信息提交的功能
1. action
<form action="test.java"></form>
<form action="#"></form> 默认值：本页
method
get 会将提交的信息全部显示 大小限制为2kb
post ：隐式提交 没有大小限制（头像 文档 密码等）
name 定义表单名称
ID 定义表的唯一标识
enctype 表单数据编码方式
1.application/x-www-form-urlencoded能够提交普通数据和特殊符号 无法提交文件
2.multipart/form-data 将内容转换为二进制进行提交 支持文件上传
3.text/plain 只负责提交基本数据
表单控件
disabled 禁用控件
<input id="vaule" disabled>
maxlength 限制输入的字符数
readonly 只读
name和id的命名规范
text---txt radio---rdoGender
password---txt checkbox---chk,chkHobby
<input type="button" vaule="文字"> 由用户来定义功能
1. 隐藏域
<input type="hidden"/> 提交给服务器且用户看不到
<input type="file" name=""/> 允许用户选择 要上传的文件
<label>元素
<label>文本</label> 属性：for 表示与该lable相关联的控件的id值
选项框
<select></select> 属性 name: id: size： 默认为1 大于1则为滚动列表
multiple ： 多选
<textarea></texatrea>多行文本框 属性：name cols:指定文本区域的列数<宽度>
rows:指定文本区域的行数<高度>
1<mark>2</mark> 2黄色标记
<div style="color:red;background-color:green;"></div>
选择器：规范了页面中哪些元素能够使用定义好的样式
选择器{
/*注释*/
属性:值;
属性:值;
}
在页面对样式表文件进行引入
<head>
<link rel="stylesheet" type="text/css" href="样式表文件路径" />
</head>
!important规则 :
调整样式规则的优先级
p{
color:red !important;
}
选择器：1.通用选择器
作用：匹配页面上的任何一个元素
语法：*{}
*{
font-size:12px;
/*...*/
}
2.元素选择器
body{
}
div{
}
h1{}
3.类选择器
使用: <div class="类名"></div>
注意：类名不能以数字开头
.div123{}
<div class="div123"></div>
4.id选择器
为标有特定id的html元素指定样式
语法：#id值{}
#header{
background-color:red;
}
<div id="header"></div>
5.群组选择器 用逗号隔开
6.后代选择器 #d1 #d4
7.子代选择器 #d1>.d4
8.伪类选择器
1.链接伪类
：link 匹配尚未访问的链接
a:link {
color:red;
}
：visited匹配访问过的链接
2.动态伪类
：hover 匹配鼠标悬停在HTML元素的动态
:active匹配元素被激活时的状态
：focus 匹配元素获取焦点是的状态（多数使用在 文本框 上）
input：focus｛ color：red;｝
溢出处理
overflow
<style> 实线
bordr:1px solid red；
width：100px height:100px
ocerflow:visible
</style>
visible: 溢出可见 hidden 溢出隐藏 scroll 出现滚动条
auto 自动调试
能够改变尺寸的元素
1.块级元素
p div hn ul ol dd dt dl
边框
solid 实线 dotted 虚线 dashed 虚线
<style>
div{ border:10px soild red; width:300px; height:300px;
border-top:10px soild transparent 隐藏边框上框
</style>
