html和css的全盘复习

html的基础知识

基本框架

<!Doctype html>
<html>
<head>
<style>
</style>
<meta charast="utf-8">
<tiltle>基本框架</title>
</head>
<body>
</body>
</html>
  • body标签在里面设置网页的框架标签和内容
  • style为html的样式进行修饰和改变

结构性标签

  1. section 标签对网页内容分区分块
  2. article 为特殊的section标签 代表一个完整的相关内容块 用于定义一篇文章
  3. nav 标签代表页面的一个部分 标签用于定义页面主导航功能。
  4. aside标签定义侧边栏,通常是网页的说明、提示、引用、附加注释、相关链接、广告等内容
  5. header 标签 标签用于定义文档的页眉(介绍信息)
  6. footer 页脚
  7. summary定义details的标题 details标签的内容会被隐藏 点击summary的即可显示文本内容的样式标签
  8. header定义简介形式的内容
  9. main定义主内容 可以有各种字内容的区段(article section
    div)

div用来分节 块级元素

  • span标签 无样式 需要进行style 定义或行内元素修改文本标签
  • figure 标签 定义独立的流内容 例如 图像 照片 代码 一般指独立的单元
  • figcaption 标签 为figure 添加内容 类似与注释 一个figure只能用一个当点击figure内容时 会显示figcaption内的内容
  • hgroup标签对h1~h6的标签进行分组
<dialong>
<dt></dt>
<dd></dd>
</dialong>

9 dialong 标签 用于人与人之间的对话 dt 表示说话者dd 表示说的内容
文本
code元素定义计算机代码片段 不保留多余的空格和折行
pre 嵌套 code 使用最佳
var 定义程序变量
kbd 定义用户输入 键盘的输入
samp 定义程序的输出 计算机输出的结果
q元素 小语句引用 加双引号 对内部文本添加双引号
blockquote 大引用 对语句添加换行和增加外边距
abbr 元素 简称缩写·通过对缩写进行标记,能够为浏览器、拼写检查和搜索引擎提供有用的信息。<abbr title="World Health
bdo元素 指定文本的正常顺序ltr 自右往左rtl的方式

标签为段落标签 《strong>粗体标签 斜体标签 删除线标签

  • <img>标签 实现图片的插入
    必须的属性 src与 alt
  • alt text 指定图像的替代文本。
  • src URL 指定显示图像的 URL。
    次要的属性
  • width px(pixels)、% 设置图像的宽度(像素或百分比)。
  • height px(pixels)、% 定义图像的高度(像素或百分比)。
  • ismap URL 将图像定义为服务器端图像映射。
  • longdesc URL 指定包含长的图像描述文档的 URL。
  • usemap URL 将图像定义为客户器端图像映射。

video与audio标签 视频与音频标签

  • autoplay autoplay 如果指定该属性,则视频在就绪后将自动播放。
  • controls controls 如果指定该属性,则向用户显示控件,比如播放/暂停按钮。
  • height pixels 指定视频播放器的高度。
  • loop loop 如果指定该属性,将循环播放视频。
  • muted muted 如果指定该属性,则将视频的音频输出为静音。
  • Poster URL 指定视频正在下载时显示的图像。
  • preload auto、metadata、none 指定视频在页面加载时,是否进行预加载。注意:如果同时指定了 autoplay 属性,则忽略该属性。
  • auto:要求浏览器尽快加载整个视频,默认行为
  • metadata:只加载视频的元数据(宽度、高度、第一帧影像和视频总长度等)
  • none:在用户点击开始播放之前不会加载视频
  • src URL 指定要播放的视频文件的 URL 地址。
  • width pixels 指定视频播放器的宽度。

2
<a>标签 进行超链接
锚点链接可以点击第一条跳转到第二条内容

<a href= "#name"></a>
<a name="name"></a>
  • 重要 href 属性 指定链接指向页面的 URL
  • target 属性 指定在何处打开超链接。
  • _blank:在新窗口中打开
  • _parent:在当前的父窗口中打开,如果不存在父窗口,此选项的行 - 为方式与 _self 等同
  • _self:当前窗口打开(默认)
  • _top:在整个窗口中打开
  • framename:在指定的框架中打开

3 <meta> 标签
位于<head>标签内
实例一:指定网页编码

<meta charset="UTF-8">

实例二:为搜索引擎提供关键词

<meta name="keywords" content="Web开发,HTML5,CSS3,Web编程教学">

实例三:描述网页内容

<meta name="description" content="《零基础入门学习Web开发》案例演示">

实例四:定义网页的作者

<meta name="author" content="author">

实例五:设置网页尺寸自适应

<meta name="viewport" content="width=device-width, initial-scale=1.0">

实例六:每 5 秒刷新一下浏览器并跳转到指定页面

<meta http-equiv="refresh" content="5;http://www.baidu.com">

6标签
影像地图需结合标签使用 利用中的属性 usemap=“#name”
结合<map name=“name” area shape =“”(区域范围形状)
coords=“ ”(图片 的某一区域坐标)href =" "(跳转的图片位置) target=“ ”(跳转方式)>
格式化 circle 圆 cords 圆心坐标和半径
表格
<table>标题
<thead>表头<th>表头
<tbody>对html表格的主体内容进行分组
<tr>
<td>单元格
<th>表头
<tfoot>表注分组

  • border-collaspe 边框重叠 padding 表格的间距改变
  • cellpadding 单元格内的字符和单元格的间距
  • Td的colspan属性 数字为跨越单元格的多少
  • Td的cellspacing 单元格和表格边框间距

列表 list-style-type css样式设置列表无样式

<ol> 有序列表 
<li></li> type=1 or A or 图片
</ol>
<ul>无序列表
<li></li>
</ul>
定义列表
<dt>
<dd></dd>
</dt>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值