标题标签
标题标签使用<hn>,n从1到6逐渐变小
特点：加粗加黑显示，单独占一行，与其他行有一定的行间距
注释 <!....>
水平线标签 <he />
段落标签 <p> </p>
字体标签
<font>：
font里面可以设置一些属性
color：颜色 #112233
size：大小 1到7 7最大
face：字体类型
例如：
<font face = "华文彩云" size = "7" color = "red">刘德华</font>
备注：color可以有3中写法
a、英文单词: red
b、十六进制：#00ffcc
c、RGB(三原色) : new RGB(124,156,23)
<b>：加粗
<strong>：加粗
<i>：斜体
<em>: 斜体
<u>: 下划线
<s>: 中划线(删除线)
<sup>: 上标
<sub>: 下标.
特殊字符：
<小于
>大于
& &符号
"双引号
'单引号
© 版权
™商标
空格
扩展：绐html的各种标签-图像标签：
<img>：代表是一副图片。
里面有一些属性需要设置
src : 图片的路径
a、相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径
b、绝对路径
1) : 以盘符开始的路径
eg: C:\Documents and Settings\Administrator\桌面/images/1.jpg
2) : 网络路径
eg: http://www.baidu.com/images
width: 宽度
height：高度
Alt：当图片显示不出来的时候代替图片显示的内容
title： 提示性文本
border: 边框
例如：
<img src = "images/1.jpg" width = "300" height = "300" alt = "美女" border = "10" title = "这是一个美女">
注意：title属性很多标签都有，鼠标放上面会提示你设置的内容。
热点：就是特定的位置添加超链。
例如：
<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
</map>
列表标签
3种：
a.无序列表ul
属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)
例如：
<ul type = "circle">
<li>中国</li>
<li type = "square">美国</li>
<li>日本</li>
</ul>
b.有序列表(OL)
属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
start: 从几开始
例如：
<ol type = "a" start = "10">
<li>中国</li>
<li>美国</li>
<li>日本</li>
</ol>
从10开始
c.定义列表(dl)
dt: 列表项的标题
dd: 列表项
例如：
<dl>
<dt>第一条</dt>
<dd>不得随地吐痰</dd>
<dd>不得爆粗口</dd>
<dt>第二条</dt>
<dd>上课不的迟到</dd>
</dl>
超链接
3种超链接:
a. 外部连接: 连接到一个外部文件。
b. 锚连接： 是指连接到本页面或者其他页面的特定位置。指给超链接起一个名字，使用name属性给超链起名字。
c. 邮件连接：mailto:xugang@itcast.cn。
属性：target: 告诉浏览器怎么显示目标页面
HTML中已定义4个值：
_self :在同一个浏览器中显示
_blank: 打开新的浏览器显示
_parent: 在父窗口中显示
_top: 在顶级窗口中显示
例如：
<a href = "01-排版标签.html" name = "a" target = "_blank">01-排版标签.html</a>//锚连接
<a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>//邮件连接
表格标记
<table>：表格
属性：
border:边框
width:宽度
height：高度
align:表格的对齐方式
cellpadding:单元格内容到边的距离
cellspacing:单元格和单元格之间的距离
bgcolor:背景颜色
background:背景图片
bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色
bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色
dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左
<tr>:行
属性：
dir:
bgcolor:
<td>:单元格
属性：
align: 内容的横向对齐方式
valign: 内容的纵向对齐方式 top,middle,bottom
width: 绝对值或者相对值(%)
height:单元格的高度
单元格的合并：
colspan: 横向合并
rowspan: 纵向合并
<caption>: 表格的标题.
<th>: 相当于<td> + <b>
属性同<td>
<tbody> ：表的body
<thead>：表头
<tfoot>：表尾
备注：
1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。 2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
例如：
<table border = "1" width = "500" height = "300" align = "center" cellpadding = "" cellspacing = "20"
bordercolordark = "red" bordercolorlight = "green" bgcolor = "" background = "" dir = "rtl">
<tbody>
<tr bgcolor = "#00cc00" >
<td bgcolor = "red" >刘德华</td>
<td background = "images/2.gif">51</td>
<td align = "center">男</td>
<td valign = "bottom">香港</td>
</tr>
<tr>
<td rowspan = "2">成龙章子怡</td>
<td>58</td>
<td>男</td>
<td>香港</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>35</td>
<td colspan = "2">北京</td>
</tr>
</tfoot>
<thead>
<tr >
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<caption align = "bottom">学员信息</caption>
</table>
框架标记
框架页面上不允许有body标签
frameset: 框架的集合
rows: 纵向分部框架.
cols: 横向分部框架.
写法有两种:
1) 绝对值 "200,*" ,*代表剩余的
2) 相对值 "30%,*"
frame: 框架. 一个框架显示一个页面
scrolling: 是否需要滚动条。默认是true
noresize : 固定框架大小
bordercolor: 给框架边框起一个颜色
name : 给框架起一个名字，它通常会结合超链接的target属性使用，来定义最终的显示位置
内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)
iframe:
属性：
width: 宽度
height： 高度
scrolling : 是否需要滚动条
例如：
<frameset rows = "200,*">
<frame src = "top.html"></frame>
<frame src = "bottom.html"></frame>
</frameset>
表单标签
<form></form>：表单标记
例如：
<form action = "02-字体标签.html" method = "get">
<input>：
type = "text" 普通输入框
例如：
姓名：<input type = "text" value = "请输入姓名" size = "50" name = "name" ><br>
注意：name是提交给服务器的字段，value是提交给服务器的值，可以先写个默认的值
maxlength=5 输入的字段长度
readonly="readonly"只能读
placeholder="请输入用户内容" 提示的内容
required="required"
type = type = "password" 密码输入框
例如：
密码：<input type = "password" value = "请输入姓名" size = "50" ><br>
type = "hidden" 隐藏框
例如：
隐藏框：<input type = "hidden" value = "请输入姓名" size = "50"><br>
type = "radio" 单选框
例如：
性别：<input type = "radio" name = "gender" value = "male" checked>男<input type = "radio" name = "gender" value = "female">女<br>
注意：name必须要一致才能作为一个组。checked设置默认选择
type = "checkbox" 复选框
例如：
爱好:<input type = "checkbox" name = "love" value = "eat" checked>吃饭
<input type = "checkbox" name = "love" value = "sleep" checked>睡觉
<input type = "checkbox" name = "love" value = "study" checked>学java<br>
<select></select>：清单列表。
例如：
学历：<select name = "xueli" multiple>
<option value = "大学" selected="selected">大学</option>
<option value = "高中">高中</option>
<option value = "小学">小学</option>
</select>
注意：selected="selected"默认选中
type="file"打开文件
例如：头像：<input type="file" name="file"/><br/>
type = "button" 普通按钮
例如：
<input type = "button" value = "普通按钮" onclick = "alert(this.type)">
就是普通的一个按钮，不会携带数据
第二种写法：
<button onclick = "alert('大家好')">普通按钮</button>
type = "submit" 提交按钮
例如：
<input type = "submit" value = "提交按钮">
将页面填写的信息提交给其它页面，会放到url的后面
例如： file:///D:/BaiduYunDownload/day01_html/day01_html/上课示例/02-字体标签.html?gender=male&country=china&love=eat&love=sleep&love=study&xueli=大学&xueli=高中&xueli=小学
type = "reset" 重置按钮
例如：
<input type = "reset" value = "重置按钮">
重置页面的填写信息
type = "image" 图片按钮
例如：
<input type = "image" src = "images/1.jpg" width = "80" height = "30">
<textarea></textarea>说明文本
例如：
备注:<textarea rows = "5" cols = "20" namw="aaa">大神留点话吧</textarea><br>
5行20列
<fieldset></fieldset>：显示一个边框区域
里面有个<legend>选填信息</legend>显示提示信息的
一个完整的例子参考：
<form action = "02-字体标签.html" method = "get">
<fieldset>
<legend>必填信息</legend>
姓名：<input type = "text" value = "请输入姓名" size = "50" readonly disabled><br>
密码：<input type = "password" value = "请输入姓名" size = "50" ><br>
隐藏框：<input type = "hidden" value = "请输入姓名" size = "50"><br>
性别：<input type = "radio" name = "gender" value = "male" checked>男<input type = "radio" name = "gender" value = "female">女<br>
</fieldset>
<br>
<fieldset>
<legend>选填信息</legend>
国籍:<input type = "radio" name = "country" value = "china" checked>中国<input type = "radio" name ="country" value = "america">美国<br>
爱好:<input type = "checkbox" name = "love" value = "eat" checked>吃饭
<input type = "checkbox" name = "love" value = "sleep" checked>睡觉
<input type = "checkbox" name = "love" value = "study" checked>学java<br>
学历：<select name = "xueli" multiple>
<option value = "大学">大学</option>
<option value = "高中">高中</option>
<option value = "小学">小学</option>
</select>
备注:<textarea rows = "5" cols = "20" >大神留点话吧</textarea><br>
</fieldset>
<input type = "button" value = "普通按钮" onclick = "alert(this.type)">
<input type = "submit" value = "提交按钮">
<input type = "reset" value = "重置按钮">
<input type = "image" src = "images/1.jpg" width = "80" height = "30">
</form>
多媒体标记
<bgsound>：播放背景音乐
例如：
<bgsound src = "test.mp3" loop = "3"></bgsound>
<embed>：播放多媒体文件。
例如：
<embed src = "天仙子.mp3" autostart = "false" volume = "0" loop = "5"></embed>
volume是默认的音量大小
<marquee>：文本的移动
属性：
direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px
behavior: 行为方式 取值：slide,alternate,scroll
scrollamount : 移动速度
loop: 循环多少圈。负值表示无限循环
scrolldelay: 移动一次休息多长时间。单位是毫秒
一个完整的例子参考：
<body>
<embed src = "天仙子.mp3" autostart = "false" volume = "0" loop = "5"></embed>
<marquee behavior = "alternate" >我来啦</marquee>
<marquee behavior = "scroll" scrollamount = "50" loop = "3" scrolldelay = "1000">我来啦</marquee>
<marquee direction = "up" behavior = "slide" width = "300" height = "300" bgcolor = "#ff9999" >我来啦</marquee>
</body>
头标记
一个完整的例子参考：
<body bgcolor = "" background = "" text = "red" link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">
大家好
<a href = "#">你好</a>
<label onclick = "alert(this.innerHTML)">林志玲</label>
</body>
里面的一些属性
link 链接的颜色
alink 鼠标点击链接但没有松开的颜色
vlink 点击链接之后的颜色
以上信息参考博客：https://blog.youkuaiyun.com/gaopinqiang/article/details/61951814#commentBox
DIV+CSS
DIV主要用于页面的布局
Span主要用于对括起来的内容进行样式的修饰
CSS基本选择器
<!--元素选择器-->
<html>
<head>
<meta charset="{CHARSET}">
<title>元素选择器</title>
<style>
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div>hello world</div>
<div>hello world</div>
<div>hello world</div>
<div>hello world</div>
</body>
</html>
=====================================================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>id选择器和类选择器</title>
<style>
#div5{
font-size: 30px;
color: pink;
}
.div2{
font-size: 30px;
color: bisque;
}
</style>
</head>
<body>
<div>hello world</div>
<div class="div2">hello world</div>
<div id="div5">hello world</div>
<div>hello world</div>
</body>
</html>
CSS其他选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>层级选择器</title>
<style>
#div5{
font-size: 30px;
color: pink;
}
.div2{
font-size: 30px;
color: bisque;
}
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div>hello world</div>
<div class="div2">hello world</div>
<div id="div5">hello world</div>
<div><p>hello world</p></div>
<p>hello world</p>
</body>
</html>
=============================================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background-color: bisque;
}
input[type='password']{
background-color: blueviolet;
}
</style>
</head>
<body>
用户名：<input type="text"name="username" /><br />
密码：<input type="password" name="password" />
</body>
</html>
外部引用style
<link rel="stylesheet"href="style.css" type="text/css" />
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
