Html
1.html不是一种编程语言,是一种标志语言。
2.结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html总结</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
声明为 HTML5 文档
<html>
元素是 HTML 页面的根元素
<head>
元素包含了文档的元(meta)数据,如 <meta charset="utf-8">
定义网页编码格式为 utf-8。
<title>
元素描述了文档的标题
<body>
元素包含了可见的页面内容
Html基本标签
1.<h1>—<h6>
用于标题文本。
2.<p></p>
标签 段落标签。
3.<strong>
<b>
文字加粗标签。
(1)<strong>
用于强调文本,强度更深,表示重要文本—>用于SEO优化
(2)<b>
只是视觉加粗效果—>单纯为了产生加粗。
4.<em>
<i>
斜体标签
(1)<em>
用于强调文本。
(2)<i>
只是视觉斜体效果
(3)<strong>
比<em>
强调更强.
5.特殊标签:
 
; —->空格
>
; —>大于号
<
;—>小于号
"
;—>引号
©
;–>版权号
6.<span>
对文档中的行内元素进行组合,没有固定的格式表现。例如:<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
。
7.<pre>
文字的格式按源码的排版来显示,我们称之为预处理格式。
8.<a>
属性href必不可少:
_self(在原来页面打开)
_blank(新窗口打开)
_top(打开时忽略所有的框架)
_parent(在父窗口中打开)。
(1)创建锚点 <a name="锚点名称"></a>
(2)使用创建好的锚点名称 <a href="#锚点名称">内容</a>
。
img图片标签与路径
1.常见图片格式 jpg png gif
Gif (只支持全透明)
Jpeg /jpg
Png 半/全透明都支持.
2.图片标签写法 :
<img src="" alt="" width="" height="" />
3.四要素:
src="" 图片路径
alt="" 图片含义
width="" 图片宽度 和图片大小保持一致
height="" 图片高度 和图片大小保持一致
title=""
4.<img src="" …… align="" />
align属性–设置图片与后面文字的位置关系
值–top、bottom、middle、absmiddle、left、right。
5…路径知识:
(1)相对路径:(Relative Path) 相对于该文件的路径;
(2)绝对路径:(Absolute Path) 从磁盘出发的路径。
/
开头表示根目录;
./
表示当前目录;(斜画线前面一个点)
../
上级目录;(斜画线前面两个点)
直接用文件名不带/
也表示同一目录
这些都是相对于当前文件的位置来说的,如果用绝对路径的话就是写全了。
列表
1.<ul>
无序列表:没有顺序项目的列表,此列表项默认粗体圆点进行标识。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2.<ol>
有序列表:列表项目使用的是数字进行标记。
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
3.列表符号:
(1)无序列表:
type=“disc”
实心圆 (默认)
type="circle"
空心圆
type="square"
方块符
(2)有序列表:
type="A"
A B C D
type="a"
a b c d
type="1"
1 2 3 4
type=”I”
I II III
type=”i”
i ii iii
4.列表嵌套:
(1)无序列表-嵌套:
<ul>
<li>鸟
<ul>
<li>海鸥</li>
<li>燕子</li>
</ul>
</li>
<li>虫</li>
<li>蜘蛛</li>
</ul>
(2)有序列表-嵌套:
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>饮料</li>
<li>水</li>
</ol>
5.定义列表:定义列表以 <dl>
标签开始。每个定义列表项以 <dt>
开始。每个自定义列表项的定义以 <dd>
开始。dd
是对dt
的解释。
<dl>
<dt>网页制作</dt>
<dd>html+css</dd>
<dt>网页渲染</dt>
<dd>js+jq</dd>
</dl>
< dl>< /dl>
用来创建一个普通的列表,
< dt>< /dt>
用来创建列表中的上层项目,
< dd>< /dd>
用来创建列表中最下层项目,
< dt>< /dt>
和< dd>< /dd>
都必须放在< dl>< /dl>
标志对之间。
dl是definition list的缩写。
dt是definition title的缩写。
dd是definition description的缩写。
6.list-style属性:
list-style-position
:设置列表项图标的位置,位于文本内或者文本外
list-style-type
: 设置列表项图标的类型
list-style-image
:使用图像设置列表项图标。
表单元素
1.<form>
表单标签,表单是一个包含表单元素的区域,包括起来的都是表单的内容。
<form>
<input type="text"/>
</form>
2.隐藏域隐藏标签:隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
<form>
<input type="hidden" name="hid" value="value">
</form>
3.<input>
定义输入域标签
<input type="" name="" value="" />
type="text" 单行文本输入框
type="password" 密码(maxlength="")
type="radio" 单项选择(checked="checked")
type="checkbox" 多项选择
type="button" 按钮
type="submit" 提交
type="image"图片提交
type="file" 上传文件
type="reset"重置
type="hidden" 隐藏
4.<label>
标签:为input元素定义标注(标记)。<label>
标签的作用是为鼠标用户改进了可用性,当用户点击
<p>单向选择</p>
<label for="male">男:</label><input type="radio" name="sex" id="male"/>
<label for="nv">女:</label><input type="radio" name="sex"checked="check"/>
5.<textarea>
文本域标签:可以在其中插入一段文字内容,它有两个常用属性rows和cols。
rows表示这个文本域有多少行
cols表示这个文本域有多少列。
readonly(另外的属性)只读,文本域的内容无法改变,相当于协议和title(鼠标放上提示)。
6.<select>
标签:提交标签,当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select>
表单数据提交给服务器时包括name属性。
<form>
<select name="" id="">
<option value="1">1月</option>
<option value="2">2月</option>
</select>
</form>
常用到的属性:disabled=“disabled” name="sel" size="2"
表格元素
1.<table>
是表格标签,可以用它定义一个表格。
2.<tr>
可以定义表格中的一行,一个<tr></tr>
表示一行。
3.<td>
可以定义表格中的一个单元格,<td></td>
表示一个单元格。
<table border="1">
<tr>
<td >姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
</table>
姓名 | 性别 | 爱好 |
border-collapse:collapse;
colspan左右合并
rowspan上下合并
常用可视化标签
1.<div>
布局标签
2.<a>
超链接标签:
href属性:设置跳转的网页地址
target属性:设置跳转的目标
结论:凡事页面可以点击跳转或者表单提交的文字,都用a标签.
3.<img>
图片标签:
src属性用来设置图片的url数据
alt提供给搜索引擎搜索的
width
height
结论 :显示图片
总结
非可视化标签:head meta style scrpit…
可视化标签:img div span a ul li…只有可视化标签,才能用css改变它
单标签:meta link base img input br hr
双标签:html head body div a p span …ul li ol dl ….