Chapter1&2 HTML与CSS
1. html基础
1.1 html书写规范
格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> 页面内容 </body> </html>
注释
<!-- 注释内容 -->
1.2 HTML标签
标签的格式
<标签名>内容</标签名> <!--双标签--> <标签名/> <!--单标签-->
规则
- 标签名大小写不敏感
- 标签分为单标签与双标签,常见单标签:
br
:换行hr
:水平线
标签的属性
- 基本属性:可以修改简单的样式效果
bgcolor="red"
- 事件属性:可以直接设置事件响应后的代码
onclick="alert('你好!');"
- 基本属性:可以修改简单的样式效果
1.3 常用标签
font字体标签
color属性:颜色
face属性:字体
size属性:文本大小
<font color="red" face="宋体" size="5">我是字体标签</font>
效果:
我是字体标签
特殊字符
效果 描述 格式 编号 空格   < 小于号 < < > 大于号 > > & 和号 & & “ 引号 " " ‘ 撇号 ' ' 标题
h1
-h6
,h1
最大align
属性:对齐,left
、center
、right
<h1 align=center>标题</h1>
标题
超链接
<a>
标签代表超链接href
属性设置链接地址target
属性设置跳转方式_self
:当前页面_blank
:打开新页面
<a href="" target="_self">个人博客</a><br/>
列表标签
- 无序列表
<ul>
- 有序列表
<ol>
- 无序列表
img标签
显示图片
src属性设置图片路径
- 相对路径:
.
和..
- 绝对路径:
http://ip:port/工程名/资源路径
- 相对路径:
width
、height
属性设置宽度和高度border
设置边框(数字,像素数)alt
显示出错时的文字提示<img src="omg.png" wight=200 height="300" border="1" alt="omg">
表格
table
标签border
属性:边框width
与height
:宽与高align
:设置表格相对于页面的位置cellspacing
设置单元格间距(0则无间距)
<tr>标签:行
<td>标签:单元格
<b>标签:加粗
<th>标签:格式化的单元格(加粗、居中)
代码示例及效果
<table border="1" width=300 height=200 cellspacing="0"> <tr> <th>1.1</th> <th>1.2</th> <th>1.3</th> </tr> <tr> <td align=center>2.1</td> <td>2.1</td> <td>2.1</td> </tr> </table>
1.1 1.2 1.3 2.1 2.1 2.1
跨行跨列表格
- <td>或<th>标签中使用
- 跨行:
colspan
属性,等于几则跨几行 - 跨列:
rowspan
属性
iframe
标签页面上开辟小区域,显示单独的页面
与<a>标签组合使用
在
iframe
标签中使用name
属性定义名称a
标签的target
属性设置为iframe
的name
属性值示例
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe> <br/> <ul> <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li> <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li> <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li> </ul>
表单
form
标签,用于收集用户信息的所有元素集合input
标签:文本输入框, 根据type
属性:type
属性为text
:文本输入框,value
属性设置默认值type
属性为password
:密码输入框type="radio"
:单选框,name
设置属性用于分组,checked="checked"
默认选中当前选项type="checkbox"
:复选框,checked="checked"
默认选中type="select"
:下拉列表框,option
标签设置下拉列表内容,selected="selected"
属性设置默认选中type="textarea"
:多行文本输入框row
属性:显示的行高cols
属性:显示几个字符宽度- 标签内容即为默认值
type="reset"
:重置按钮,value
属性修改其名称(默认重置)type=submit
:提交按钮,value
·····type=button
:按钮,····type=file
:文件上传域type=hidden
:隐藏域,发送某些信息而不需要用户看到时使用
表单格式化:
一般将表单内容放到表格中
表单的提交
action
属性设置提交的服务器地址method
属性设置提交的方式GET
(默认)或POST
- 表单提交时,数据没有发送的原因:
- 表单项没有
name
属性 - 单选、复选、下拉列表的
option
选项没有添加value
属性 - 表单项不在
form
标签中
- 表单项没有
- GET请求的特点
- 浏览器地址栏中的地址是:action属性 + [? + 请求参数],请求参数的格式为:name=value&name=value
- 不安全
- 数据长度有限制
- POST请求的特点
- 地址栏中只有action属性
- 相对于GET方法更加安全
- 理论上没有数据长度的限制
其他标签
div
:默认独占一行span
:长度为封装数据的长度p
:段落标签,默认在其上下方各空出一行(如果存在则不再空)
2. css
2.1 css语法规则
格式
选择器 { 属性:值; }
说明
- 浏览器根据选择器选择css样式,选择器名字是用户定义的
- 属性是要设置的样式名,属性与值组成样式声明,多个声明间用分号隔开,最后一个可以不加
2.2 CSS 和 HTML 的结合方式
标签属性中设置
在html标签的style属性上设置”key: value value;”
可读性差,没有复用性
示例
<div style="border: 1px solid red;">div标签</div>
head中设置
head中使用style标签,为各种标签设置css格式
style中遵循css语法,注释为
/* */
只能在当前页面复用,维护不方便
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ border: 1px solid red; } span{ border: 2px solid blue; } </style> </head> <body> <div>div标签</div> <div>div标签</div> <span>span标签</span> </body> </html>
单独的css文件
在.css文件中定义css样式
在html文件的头部通过link标签引入
<link rel="stylesheet" type="text/css" href="style.css">
2.3 css选择器
- 标签名选择器
- 格式
标签名{ 属性:值 }
- 引入后自动应用到相应的标签
- 格式
id
选择器- 格式
#idxxx{ 属性:值; }
- xxx为任意数字
- 需要在标签中定义
id
属性:id="id002"
- 格式
- class 选择器(类选择器)
- 格式
.classXX{ 属性:值 }
- 要在标签中加上class属性:
class="class01"
- 格式
- 组合选择器
- 格式
选择器1, 选择器2, 选择器n{ 属性:值 }
- 可以让多个选择器共享样式
- 可以是不同类型的选择器
- 格式
2.4 常用样式
- 颜色
- color: ;
- 可以是名称black、red、blue等
- 可以是rgb值:rgb(255,255,0)
- 也可以是十六进制值:#0000ff
- 宽度和高度
- 要先设置边框才能看到
width
与height
属性- 可以用像素值px或百分比
- 背景颜色
background-color:#0F2D4C
- 字体样式
color: #FF0000; 字体颜色 font-size: 20px; 字体大小
- 边框
border: 1px solid red;
- 三个值分别代表粗细、形状、颜色
- 形状有实线(solid)、虚线(dashed)等
- div居中
- 使整个div快块相对于页面居中
- 通过页边距来设置
- margin-left: auto;
- margin-right: auto;
- 文本居中
text-align: center;
- 超链接去下划线
text-decoration:none
- 表格细线
- 即合并单元格与表格的边框
table{ border: 2px solid red; // /*设置边框*/ border-collapse: collapse; /*将边框合并*/ } td{ border: 2px solid red; }
- 即合并单元格与表格的边框
- 列表去除修饰
- 即去除前面的点或序号
ul { list-style: none; }
- 即去除前面的点或序号