首页 > 代码库 > 关于HTML
关于HTML
HTML 超文本标记语言
1.文件编写
HTML文件必须以htmi 或者 .html为后缀
2.后缀的显示
win10:打开我的电脑(计算机) -->点击上面的查看 -->选中文件的扩展名
3.打开方式
第一种：双击打开
第二种：右键选中响应的打开方式(编辑方式)浏览器打开
4.HTML标准格式
<html>
<head>
<title>页面信息</title>
</head>
<body>
页面信息
</body>
</html>
5.<title>标题
<title>标题</title>
6.<meta> 标签
//设置关键词(搜索引擎搜索)
//设置html内容的文档内容格式和编码方式
<meta http-equiv ="Content-type"
content ="text/html";charset =gb2312"/>
//网站描述
<meta name = "Keywords" content ="内容"/>
<meta name = "description" content ="描述内容"/>
One 第一章
1.h标签(标题标签）
h1~h6
2.br标签（换行标签）
<br/>
3.hr标签(水平线标签）
<hr/>
4.strong（加粗）
em（倾斜）
5.特殊
（空格）
>(大于)
<（小于）
"（引号）
©（版权符号）
6.图片标签<img>
<img src="" alt=“” title="" width="" height=""/>
src:图片的地址（路径+图片名称)
alt:图片找不到时的提示信息
title:当鼠标悬停在图片上的提示信息
width:宽度.（px）
height:高度.（px）
注意：怎么找图片
第一步:确定当前html的位置
第二步:如果图片在同级目录直接写图片名称
如果图片在上级目录 就用../图片名称
如果是在下级就用目录名称/图片名称
7.超链接
<a href="" target="">内容</a>
href:要跳转的文件路径名称(路径和图片方式一样)
target：_self(目标页面覆盖当前页面）
_blank(目标页面弹出新的框来显示）
8.锚链接
创建步骤
第一步：创建锚点
<a name=“ding”>xxx</a>
第二步：访问锚点链接
<a href=http://www.mamicode.com/“#ding”>访问锚点
9.<href="mailto:邮箱地址”></a>
Two 第二章
1.无序列表
<ul>.............声明无序列表
<li></li>列表项
</ul>
补充：type属性：circle(空心圆),square(实体方心)
2.有序列表
<ol>.........声明有序列表
<li></li>列表项
</ol>
补充：type属性：1,a,A
3.定义列表
<dl>......声明定义列表
<dt></dt>......列表项内容声明
<dd></dd>.....列表项内容
</dl>
4.表格
<table>...表格标签...
<tr>...行标签...
<td></td>...单元格
</tr>
</table>
table属性：align：left： 左对齐 center：居中对齐 right:右对齐 valign：top：顶端对齐 middle：居中对齐 bottom：低端对齐 baseline：基线对齐
callspacing：单元格与单元格之间的距离
cellpadding：单元格边界与单元格文字之间的距离
bgcolo：背景颜色
td属性：colspan：表示这一单元格占几格 rowspan：跨行
5. 框架标签
<frameset> <!....框架标签....>
<frame src="http://www.mamicode.com/html的路径加名称"></frame> <!....引用html标签....>
</frameset>
6.刷新框架指定区域
第一步：在指定的feame中指定name属性值
第二步：在超链接部分指定target的值为那么的属性值
7.内联框架<iframe>
<iframe src="http://www.mamicode.com/html路径+名称" frameborder="0|1" scrolling="yes|no > </iframe>
frameborder:0表示无边框 1表示有边框
scrolling:yes表示有滚动条 no表示没有滚动条
(1)刷新内联框架步骤
第一步：在指定的feame中指定name属性值
第二步：在超链接部分指定target的值为那么的属性值
8.target的属性值
_blank:在新的窗口打开链接
_self:在链接所在页面的自身窗口中打开链接
_parent:在父框架集中打开链接，如果不是框架网面，则含义同“_self”
第三章 ：表单
1.语法
<form action="" method="get|post>
<input type="" name="" value=""/>
post：规定如何发送表单数据
2.<input元素的属性>
(1)type属性的值
text:表示输入框（文本框）
password：表示密码框
submit：表示提交按钮
reset：表示重置按钮
radio：单选按钮
checkbox：复选按钮
file：文件传输协议
hidden：隐藏域
image：照片
button：普通按钮
3.下拉框
<select name="" <!--下拉框-->
<option value=""></option> <!--下拉框选项-->
</select>
注意：a.默认选中<option selected="selected"></option>
b.radio,<checkbox的默认选中是checked="checked"
4.图片按钮
<input type="image" src="http://www.mamicode.com/图片路径+名称"/>
5.文本域
<input type="file"/>
注意：提交方式是post，并且在form中指定enctype="multipart/form-data"
6.多行文本域
<textarea cols="多行" rows="多行"> </textarea>
7.域
<fielsdet> //域标签
<legend>xxxx</legend> //域标签
<input type="xxx">
</fielsdet>
8.表单元素标注
<label for="id属性值"></label>标注
步骤：
第一步：给指定的标签加上id属性
第二步：在label中加上for="id的属性的值"
9.只读和禁用
只读：<readonly="readonly">
禁用：<disabled="disabled">
第四章css
4.1css的语法
4.1.1位置
<head>
<style type="text/css"
//css代码
</style>
</head>
4.1.2语法
选择器{属性值1：属性值1；
属性值2：属性值2；
}
例：
h1{
font:size:12px; --字体大小
color：red； --字体颜色
注意：多个属性用分号分隔
4.2选择器
4.2.1标签选择器
语法：
标签名{
...
}
4.2.2类选择器
语法：
.class属性值{
....
}
步骤：
第一步：给指定的html标签加上class属性
第二步：在stlye中写
.class属性值{
.....
}
4.2.3id选择器
语法：
#id属性值{
.....
}
步骤：
第一步：给指定的html标签加上id属性
第二步：在style中写
#id属性值{
....
}
4.3引用样式的方法
4.3.1行内样式
使用style属性引入样式
例：<h1 style="font-size: 60px;color: chartreuse;">进进进进</h1>
4.3.1内部样式表
在head中写style
例：h1{
xxx
}
4.3.3外部样式表
把css代码保存在css结尾的文件中（层叠样式文件）
把css引入html
引入方法有两种：
第一种：链接方式
<link rel="stylesheet" href="http://www.mamicode.com/文件路径" type="text/css"/>
第二种：导入方式
<style>
@import url("文件路径");
</style>
4.4优先级
行内样式>内部样式>外部样式（就近原则）
id选择器>class选择>标签选择器
4.5.2交集选择器
标签选择器（class选择器|id选择器）{
....
}
4.5.3并集选择器
选择器1，选择器2，选择器3，选择器4....选择器n{
...
}
5.1字体样式
font-family:字体类型
font-size:字体大小
font-weight:字体粗细（bold）
font-style:字体倾斜(italic)
font:倾斜 粗细 大小 类型
5.2文本样式
colo：颜色
text-align:文本对齐方式
text-indent:文本缩进
line-height：行高
text-decoration：装饰
vertical-align：垂直对齐方式
注意：vertical-align用于td中
5.3超链接伪类
a:link：表示没有访问
a:visited：表示被访问后
a:hover：鼠标悬浮
a:active：鼠标按下了松开
填写顺序：link>visited>hover>active
5.4背景样式
background-color：背景颜色
background-image:url（图片路径）
background-repeat:图片平铺方式
background-position:图片的位置
简：background：颜色，图片位置，平铺方式
5.5列表样式
list-style-type:列表样式
list-style-image:url（图片路径）
list-style-position:位置（inside|outsid）
list-style：样式 图片 位置
第六章盒子模型
6.1盒子模型属性
width：宽
height：高
border：边框
padding：内边框
margin：外边框
6.2边框
border：简写
border-color:颜色
border-width:边框宽度
border-style:边框风格
注意：边框可以分为上，下，左，右可以分别设置值
6.3外边距
margin:外边距
margin-left:左外边距
margin-top:上外边距
margin-right：右外边距
margin-bottom：底外边距
6.4内边距
padding:内边距
padding-top：上内边距
padding-left：左内边距
padding-right：右内边距
padding:-bottom：底内边距
6.5 display
display:none:表示的隐藏元素
display:block；块级元素（显示）
display:inline；内联元素（显示）
第七章：浮动
7.1浮动
float：left，right，none，
注意：a.浮动元素会把当前的块级元素变成内联元素
b.不在标准文档流中.（不会被普通元素排版）
7.2清除浮动
clear：both（清除左右浮动），
left（清除左浮动），
right（清除右浮动），
7.3溢出处理
overflow：none（moren）
hidden（隐藏）
scroll（滚动）
auto（自动（滚动效果））
注意：可以通过overflow：hidden设置浮动元素的父元素
的高度，使它包裹整个浮动元素.
第八章
8.1 元素定位（position）
static：默认
relative：相对定位
absolute：绝对定位
fixed：固定（建议不要使用，部分浏览器必兼容）
注意：a.相对布局和绝对布局如果它的直接父标签是body，那么相对
位置和绝对位置的起始点不同，如果他们的直接父标签是div，那么
他们的起始点都在父标签的左上角
b.绝对布局都是从父标签的左上角开始，
相对布局遵从标准文档流格式。
c.绝对布局一定设置top或者left才会生效。
8.2重叠关系（z-index）
默认关系为0
值可以是任何整数
值越大，位置在越前面
8.3透明度
opacity：0~1值越小越透明
关于HTML