Html复习总结

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.特殊标签:
&nbsp; —->空格
&gt; —>大于号
&lt;—>小于号
&quot;—>引号
&copy;–>版权号
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 属性设置是否将表格边框折叠为单一边框:
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 ….

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值