一、head头部中的内容:
1、<meta charset="UTF-8"> <--!告诉浏览器什么编码-->
2、<meta http-equiv="Refresh" Content = "5"/> <!--页面自动刷新功能,每隔5秒-->
3、<meta http-equiv="Refresh" Content = "5; Url=http://www.baidu.com"/><!--页面自动刷新功能,每隔5秒,跳转到百度首页-->
4、<meta name="keywords" content="博文,python"/><!--网页的关键字-->
5、<meta name="description" content="各种发布的博文,python语言、linux运维等各方面的技术"/><!--网页描述-->
6、<title>欢迎加入博客园</title><--!网页显示标题-->
7、<meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE=edge"/><!--指定页面的渲染模式,此指按照最高的渲染模式,主要解决兼容性的问题-->
<meta http-equiv="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE7"/><!--指定页面的渲染模式,此指按照IE7的渲染模式,主要解决兼容性的问题-->
8、link标签:主要是引入css样式、页面顶部图标、js脚本
<link rel="shortcut icon" href="image/页面图标.png"/><--!引入页面顶部图标-->
。。。
二、body的杂七杂八
三类标签的分类:块级标签、行内标签(或内联标签)和各种符号
区别:块级标签占一行,行内标签(或内联标签)占一块
A》块级标签
1、div标签:<div style="background-color: red">div:块级标签</div>
2、p标签:段落 <p style="background-color: red">p:块级标签</p>
3、br标签:换行 <p style="background-color: red">p:块<br/>级标签</p>
4、h1-h6标题标签:
5、列表标签
6、label标签
label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。
当鼠标点击label标签内的文本时,自动将焦点转移到控件本身。
B》行内标签(或内联标签)
1、a标签:<a style="background-color:greenyellow">a:行内标签</a>
a标签的跳转用途:
特有的属性 href = "http://www.baidu.com"
<a href="http://www.baidu.com">百度</a>
target属性:打开的链接页,将以重新打开一页、在当前页等形式展开
<a href="http://www.baidu.com" target="_blank">百度</a><!--在新的一页中打开链接页-->
<a href="http://www.baidu.com" target="_parent">百度</a><!--在父级页中打开链接页,可以理解为本页中-->
a标签的锚点用途:
<a href="#第一章">第一章(点击此处直接跳到id为第一章的div处)</a>
<a href="#第二章">第二章(点击此处直接跳到id为第二章的div处)</a>
<a href="#第三章">第三章(点击此处直接跳到id为第三章的div处)</a>
<div id="第一章">第一章内容</div>
<div id="第二章">第二章内容</div>
<div id="第三章">第三章内容</div>
2、span标签:内联标签,不会独占一行。格式化文本
<span>span标签</span>
例如一段文本:<p>我是中国人</p>,你想把“中国”二字单独加粗,这时你就可以使用<p>我是<span>中国</span>人</p>,然后对其设置CSS就可以了。
三、允许用户输入值的系列标签
1、input系列
邮箱:<input type="email"/> <!--系统自动去检测填写的内容是否符合邮箱的格式-->
登录用户名:<input type="text"/> <!--单行输入框的应用-->
密码:<input type="password"/> <!--自动将输入的字符或者数据转换为黑点形式-->
性别:男<input type="radio" name="sex"/>女<input type="radio" name="sex"/> <!--单选框的应用-->
属性:男<input type="radio" name="sex" checked ="checked" /> <!--checked属性表示默认选中-->
爱好:篮球<input type="checkbox"/> 足球<input type="checkbox"/> 排球<input type="checkbox"/> <!--复选框的应用-->
属性:默认选中的方式和单选框一样的设置方式,checked = "checked"
城市:<select><option>北京</option><option>上海</option><option>广州</option></select> <!--下来框的应用-->
属性:<select multiple size="10">...</select> mutiple:表示可以同时多选,size = “10” 表示列表中显示10个选项
<option selected="selected">北京</option> 表示默认选中北京。与上面的单选框、多选框关键字不一样
简介:<textarea></textarea> <!--多行输入框的应用-->
照片:<input type="file"/> <!--上传文件功能的应用-->
补充:
<div>登录用户名:<input type="text" name="username" value="root" placeholder="请输入默认值"/></div>
name属性:相当于id,标识符;value 表示默认值;placeholder="请输入默认值" 表示:提示信息,当此文本框中输入值后,此提示信息自动消失,清空后,提示信息又出现
图片:<div><img src="image/页面图标.png" alt="图标" title="页面图标"></div> <!--alt表示:当图片不存在时,图片的位置会显示“图片”两个字。title表示:当鼠标放到图片上,会显示“页面图标”四个字-->
<fieldset> <legend>注册</legend> <p>用户名:</p> <p>密码:</p></fieldset>
2、form表单标签:用来提交表单内的数据
属性:
action = “URL” 点击summit按钮后,会自动将数据提交到URL这个界面
method = "POST" 表示以哪种提交方式提交,可以是POST,GET等
enctype = "multipart/form-data" 表示上传文件
例:<form action="http://www.baidu.com/index/">
注:form表单提交数据时,各个标签都要有name属性值
例:
<!--form标签用来提交表单内的数据,跳转至www.baidu.com,同时支持了文件的上传(enctype="multipart/form-data")--><!--特别需要注意单选框(radio),多选框(checkbox),下拉菜单(select)三个标签在form中的应用--><form action="http://www.baidu.com" enctype="multipart/form-data"> <p> 邮 箱:<input type="email" name="email"/> </p> <p> 登录用户名:<input type="text" name="username"/> </p> <p> 密 码:<input type="password" name="pwd"/> </p> <p> 确认密码:<input type="password" name="pwd_sure"/> </p> <p> 性 别:男<input type="radio" name="sex" value="1"/>女<input type="radio" name="sex" value="2"/> </p> <p>爱 好: 篮球<input type="checkbox" name="hobby" value="lanqiu"/> 足球<input type="checkbox" name="hobby" value="zuqiu"/> 排球<input type="checkbox" name="hobby" value="paiqiu"/> </p> <p>城 市: <select name="city"> <option value="beijing"> 北京 </option> <option value="hebei"> 河北 </option> <option value="henan"> 河南 </option> </select> </p> <p>简 介: <textarea name="jianjie"></textarea> </p> <p> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </p></form>
四、table表格的介绍
表格标签:<table> 、 <thead> 、<tbody>
行标签:<tr>
列标签:<td> 、<th>
跨多列:<td colspan="2">我占了两列</td> 表示跨两列
跨多行:<td rowspan="2">我占了两行</td> 表示跨两行
<table border="1" style="text-align: center"> <!--border:表格边框,text-align:center:文本居中--> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <select> <option>百度</option> <option>hao123</option> </select> </td> <td>python</td> <td><a href="">删除</a>|<a href="http://www.baidu.com">跳转</a></td> </tr> <tr> <td>2</td> <td> <select> <option>百度</option> <option>hao123</option> </select> </td> <td>python</td> <td><a href="">删除</a>|<a href="http://www.hao123.com">跳转</a></td> </tr> </tbody></table>
五、CSS实战之前戏
margin: 0 auto 表示边距。默认边距为8像素。这样设置表示距离上、下边距为0,左、右边距自动平分。
border:1px 表示边框的大小
text-align:center 文本居中,还有居左:left,居右:right(水平方向)
height:48px 定义高度,为48px
width:16px 定义宽度,为16px
background-color:#bbbbbb 定义背景颜色
color:black 定义文本颜色
font-size: 18px 定义字体大小
line-height:36px 表示字体的位置,当div的高度为36px时,此时字体在垂直的中间位置
display: inline 表示具有内联标签的特性
display:block 表示具有块级标签的特性
display:inline-block 表示具有内联标签特性,也有块级标签的特性
注:
横线标签:<hr>