HTML

HTML

<body: 主体
为整个页面添加背景图片 background-image: url(’ .jpg’);

style 像元素增加样式，例如颜色,字体,大小

 <p style = "color:red;">你弟<p>

title 定义有关元素额外信息

<p title="I'm a tooltip">This is a paragraph.</p>

标题

<h1-h6: 标题，由1到6 字体从大到小
<hr: 水平线

段落

<p: 段落
<br： 换行

文本

<b: 粗体
<i: 斜体
<sub: 下标
<sup: 上标
<ins: 下划线

元素样式 style

background-color: 背景色
color: 文本颜色
font-family: 文本字体
font-size: 文字大小
text-align: 文本对齐 （可用于body）

链接

<a href =“URL”: 超链接
targer: 定义何处显示: _blank在新窗口打开
self 在新窗口或标签页中打开文档
parent在父框架中打开文档
_top在整个窗口中打开文档

title：当鼠标移到元素上时，提示信息

text-decoration:none 取消链接下划线

跳转书签:使用(id = “value”)创建书签，然后在同一页面内添加指向书签(href = “#value”)的链接

<h2 id="C4">Chapter 4</h2>
<a href="#C4" Jump to Chapter 4</a>

使用图像作为链接，将<img放在<a中

图像

<img src = “URL” alt = “文本”: 图像
decoding:
sync:文字与图片一起显示
async:先显示文字，再解析图片
auto:浏览器决定

loading:
lazy:推迟加载图像直至用户靠近
eager:立刻加载图像

Alt: 当无法载入图片时显示文本

height，width设置高度宽度

float: 让图像浮动到文本的右侧或左侧 : left,right

表格

<table 定义表格

每个表格从一个表格标签开始。每个表格行从 tr 标签开始。每个表格的数据从 td 标签开始，th为表头

<caption 表格标题

<colspan = “nums” 使单元格跨越nums行 (横向)
<rowspan = “nums” 使单元格跨越nums行 (竖向)

将style添加到<table元素中可调节表格宽度
将style添加到<th或<td元素中可调节单元表格宽度,高度 (宽度整列调节，高度整行调节)

(用于style)

padding: 调整单元格填充(单元格边缘和单元格内容之间的空间)
top:顶部 bottom:底部 left:左边 right:右边

border-spacing: 调整单元格间距(通常为2像素)

列表(可嵌套使用)

可在style中用 float:left 使其横向，多用于横向导航菜单

 li{
	float:left;
}

无序列表(小圆点标记)
ul开头 li为节点

去掉小圆点 list-style: none;

有序列表(默认数字标记,可在ol中添加typr="what"使其变成what标记 start指定目数开始计数)
ol开头 li为节点

布局

<div 块级元素，通常用作其他元素的容器
<span 内联容器，用于标记文本的一部分或文档的一部分

表单(收集信息)

<from ：表单域,把范围内的表单元素提交给服务器

表单元素

<input : 输入表单元素
<input type = “属性值”
name 传回web服务器的标签
value 规定input元素的值
checked 规定input元素默认勾选(针对多选和单选按钮) checked=“checked”
maxlengthh=“num” 规定输入字符最大长度num

输入类型由type定义
“text” 文本
“password” 密码(字符被掩盖)
“radio” 单选按钮 (必须要有相同的name属性值才能实现多选一)
“checkbox” 复选框(多选按钮)(必徐要有相同的name属性值)
“submit” 提交按钮，将表单数据发送给服务器 (里面的文本用value改变)
“reset” 重置按钮，将表内数据重置
“button” 定义可点击按钮，搭配js使用 使用场景:获得手机验证码
“file” 上传文件 使用场景:上传头像

<label for=“…”: 绑定表单元素，当点击中的文本时，同时反应表单元素
(for属性应当与绑定元素的id相同)

<select : 下拉表单元素
<option 属性 在中定义selected="selected"时，当前项默认选中

<textarea : 文本域元素 使用场景 : 留言板，评论

框架

(通过框架可以在同一个窗口显示不止一个页面)

<iframe src = “URL”
hight width 设置高度宽度
frameborder 属性值为"0"时无边框

类属性class

类声明 .类名 然后在{}中定义css属性
多个元素可共享一个类，就不用每个添加
一个元素可使用多个类，用空格分隔类名

ID属性

id声明 #id名称 {}定义css属性
类和ID的区别 一个类名可以被多个元素使用，而一个 id 名只能被页面中的一个元素使用

网页布局

.<header 定义文档或部分的标题
.<section 定义文档中的一个部分
.<article 定义一个独立的，自包含的内容
.<nav 定义一组导航链接
.<aside 内容之外的内容(如侧边栏)
.<footer 定义文档或部分的页脚
.<aside 定义内容之外的内容(如侧边栏)