Html之初体验
概述
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户
HTML文档
文档树
Doctype
Doctype告诉浏览器使用什么样的html和xhtml规范来解析html文档
有和无的区别
1:BackCompat:标准兼容模式未开启,或叫怪异模式
2:CSS1Compat:标准兼容模式已开启,或叫严格模式
这种属性会被浏览器设别并使用,但是如果你的页面没有Doctype的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始。浏览器按照自己的方式解析渲染页面,那么在不同的浏览器就会显示不同的样式。如果你的页面添加了,那么就等同于开启了标准模式,浏览器就会按照W3C的标准解析渲染页面。
Meta(metadata infotmation)
提供有关页面的元信息,例如:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1:页面编码(告诉浏览器是什么编码)
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
2:刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.fairvo.com“ />
3:关键词
< meta name="keywords" content="我是曹小贱" >
Title
网页头部信息
<title>网页头部信息</title>
Link
1:css
<!--链接一个css文件,在css目录下面的common.css文件-->
< link rel="stylesheet" type="text/css" href="css/common.css" >
2:icon
<!--连接一个图片-->
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式的方式
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
Script
1:引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
2:写js代码
< script type="text/javascript" > ... </script >
常用标签
标签一般分为两种:块级标签和行内标签
1:a、span、select等
2:div、h标签、p标签
<h1 style=" padding: 0px; line-height: 1.5 !important; color: rgb(0, 0, 255); ">>块级标签:占整个一行</h1>
<a style=" padding: 0px; line-height: 1.5 !important; color: rgb(0, 0, 255); ">>内敛标签:用多少占多少</a>
p和br标签
p表示段落,默认段落之间是有间隔的
br表示换行
a标签
1、target属性,_black表示在新的页面打开
2、锚
<a href="http://www.fairvo.com" target="_blank">曹小贱</a>
H标签
H 标签
H1
H2
H3
H4
H5
H6
select标签
1:下拉菜单式
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option selected="selected" value="3">广州</option>
</select>
2:设置选择的个数限制(出现两个但是只能选择其一)
<select size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>
3:设置选择的个数限制(出现两个,可以选择多个)
<select size="2" multiple="multiple">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>
4:显示多级菜单的选择
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
Checkbox
这里提供三类
<input type="checkbox">
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">
Radio
单选的方式
<input type="radio" value="man">
多选的方式
<input type="radio" value="man" name="gender">
<input type="radio" value="male" name="gender">
<input type="radio" value="no" name="gender" checked="checked">
并且默认是空值
Password
设置密码
一种是显性的,一种是阴性的
<input type="text">
<input type="password">
Button and Submit
<!--button-->
<input type="button" value="button">
<!--submit-->
<input type="submit" value="submit">
File
<input type="file" value="file">
<p>提交文件时: enctype='multipart/form-data' method='POST'</p>
Textarea
可以使用默认和使用设置大小
<textarea></textarea>
<textarea style="width:500px;height: 200px;"></textarea>
Label
<!--不使用label-->
<input id="name1" type="text">
<input id="marriy1" type="checkbox">
<!--使用label-->
<label for="name2">
姓名:
<input id="name2" type="text">
</label>
<label for="marriy2">
婚否:
<input id="marriy2" type="checkbox">
</label>
ul ol dl
<ul>
<li>ul.li</li>
<li>ul.li</li>
<li>ul.li</li>
</ul>
<p>ol</p>
<ol>
<li>ol.li</li>
<li>ol.li</li>
<li>ol.li</li>
</ol>
<p>dl</p>
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
Table
<table border="1">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
Fieldset
将其中的内容定格到一个框中
<fieldset>
<legend>登录</legend>
<p>用户名:</p>
<p>密码:</p>
</fieldset>
Form表单
<form action="http://www.baidu.com" method="POST">
<input type="submit" value="submit">
</form>
<form action="http://www.baidu.com/s" method="GET">
<input type="submit" value="submit">
</form>
<p>文件:enctype='multipart/form-data' method='POST'</p>
CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style = 'key1:value1;key2:value2;'
使用方式:
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件 <link rel=”stylesheet”href=”common.css”/>
标签选择器
div{ background-color:red; }
<div > 这是背景的颜色:红色</div>
class 选择器
.bd{ background-color:red; }
<div class='bd'>另一种实现方式 </div>
ID选择器
#idselect{ background-color:red; }
<div id='idselect' >fyjdfhfjf </div>
关联选择器
#idselect p{ background-color:red; }
<div id='idselect' > <p> 选择div,因为其中有p标签,同时也会生效</p> </div>
组合选择器
input,div,p{ }
属性选择器
input[type='text']{ width:100px; height:200px; }
Backgroup
背景颜色
<div style=""> </div>
背景图片
<div style="background-image:url('image/4.gif'); height: 80px;"></div>
DIV是块级标签,会占用整个一行,默认他会复制多个,填充满整行
设置成不要重复的
<div style="background-image:url('image/4.gif'); height: 80px;background-repeat:no-repeat"></div>
border
<div style="border:1px solid red; height: 10px;"></div>
像素 类型 颜色 高度
margin
<div style="border:1px solid red; height: 70px;">
<div style=" height: 50px; margin-top:20px;"></div>
</div>
padding
<div style="border:1px solid red; height: 70px;">
<div style=" height: 50px; padding-top: 20px;"></div>
</div>
display
display:block
内敛标签变成了块级标签
<div>original</div>
<div style="display:none;">none</div>
<span style="">content</span>
<span style="display: block; ">content</span>
display:inline
块级标签变成内敛标签
<div style="">content</div>
<div style="display:inline;">content</div>
Cursor
在某处时,鼠标的样式
css提供的cursor值
pointer、help、wait、move、corsshair
浮动
<div style="">
<div style="float: left">left</div>
<div style="float:right">right</div>
</div>
中间填充
<div style="">
<div style="float: left">left</div>
<div style="float:right">right</div>
<div style="clear: both;"></div>
</div>
- Python接口自动化-7-unittest
- cobbler自动安装系统(Centos7.X)
- Linux NTP时间服务器
- 子查询的另一种方式——映射
- LNMP架构之搭建wordpress博客网站
- Nginx的各种报错总结
- 谷歌TensorFlowLite正式发布,机器学习框架向移动端大步挺进!
- ABP+AdminLTE+Bootstrap Table权限管理系统一期
- 18888元秒下的域名sdhlx.com已建站
- 锂离子电池发明人:自动驾驶汽车电池需要更加耐用
- Linux中MySQL5.6编译安装与MySQL5.7二进制安装步骤
- Nginx服务编译安装、日志功能、状态模块及访问认证模式实操
- 快速入门系列--WebAPI--03框架你值得拥有
- 快速入门系列--MVC--06视图
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- IIC协议
- 通过例子学习编写shell
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第三天:MakeFile
- 继续学习Shell脚本(详细)
- 将linux终端的输出信息保存到log中
- UNIX网络编程卷1(第三版)一个简单的时间获取服务器的程序
- Python数据分析实战(3)Python实现数据可视化
- xresloader转表工具链增加了一些新功能(map,oneof支持,输出矩阵,基于模板引擎的加载代码生成等)
- 数据结构之树
- UNIX网络编程卷1(第三版)套接字编程简介
- UNIX网络编程卷1(第三版)readn,writen和readline函数
- UNIX网络编程卷1(第三版)基本TCP套接字编程
- Ubuntu下linux映射共享盘到window下方法
- 数据同步写入磁盘:sync
- 惯用的关机命令:shutdown