html内容复习
HTML标签的分类
常规元素
<标签> 内容 </标签>
空元素
<标签/>
HTML标签的关系
-
嵌套关系(父子)
-
并列关系(兄弟)
HTML标签有哪些
<title>
:页面主体内容。<h$>
:h1~h6,分级标题,h1
与title
协调有利于搜索引擎优化。<ul>
:无序列表。(子元素只能是<li>
)<ol>
:有序列表。(子元素只能是<li>
)<header>
:页眉通常包括网站标志、主导航、全站链接以及搜索框。<nav>
:标记导航,仅对文档中重要的链接群使用-。<main>
:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主-要功能。<article>
:定义外部的内容,其中的内容独立于文档的其余部分。<section>
:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。<aside>
:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。<footer>
:页脚,只有当父级是body时,才是整个页面的页脚。<small>
:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。<strong>
:和 em标签一样,用于强调文本,但它强调的程度更强一些。<mark>
:使用黄色突出显示部分文本。<figure>
:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。<cite>
:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。<blockquoto>
:定义块引用,块引用拥有它们自己的空间。:短的引述(跨浏览器问题,尽量避免使用)。
<time>
:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。<dfn>
:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。<ins>
:添加的内容。<code>
:标记代码。<meter>
:定义已知范围或分数值内的标量测量。(Internet Explorer不支持 meter 标签)<progress>
:定义运行中的进度(进程)。
表单元素
这个挺多的还不好记,就写一写
input<input type="xx">
- type取值
- text
- password(只是防偷窥,没有加密效果)
- data日期选择(有兼容问题)会自动出现一个日历供选择年月日
在更换type属性的时候快捷方式input:类型敲击回车生成对应类型的input - search搜索框(在电脑上就多了个删除按钮,手机端可以让键盘换样式)
- range滑动条,选中的数字要用js读取(有min max属性来调整滑块的范围}
- color颜色选择
- number数字输入框(也有min和max,step每一次点击增加或者减少的数值)
- checkbox多选框
- radio单选框,在编写的时候要用name属性规定哪几个单选框是一类的,否则无法实现单选效果
label
-
显式关联,用label的for属性关联input选框的id
通常配合单选和多选框使用,点击文字也可以选中选项
<label for="#表单元素的id">选项的名字</label>
-
隐式关联
把input作为label的子元素,就不用for属性进行关联了
<label for="#表单元素的id">
<input type="xx">
</label>
HTML文本的基本结构
<!DOCTYPE html> /*怪异渲染,告诉浏览器用的那个版本号*/
<html lang="en"> /*页面语言选择*/
<head>
<meta charset="UTF-8"> /*编码格式。gb2312: 简中编码,BIG5:繁中编码,GBK:中文字符编码,UTF-8:万国码,一般默认这个.*/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
/*这里是主体*/
</body>
</html>
HTML常用标签
-
排版标签
a. 标题标签<h> </h>
(共 6 级标签)
b. 段落标签<p> </p>
c. 水平线标签</hr>
d. 换行标签<br />
(官方文档不建议用作分割线)
e. div标签(division),span标签(都是用来布局的):
div 默认为block
span 默认为inline -
文本格式化标签
a.<b> </b>
<strong> </strong>
(推荐) 加粗
b.<i> </i>
<em> </em>
(推荐) 斜体
c.<s> </s>
<del> </del>
(推荐) (line-througth 的效果)
d.<u> </u>
<ins> </ins>
(推荐) (下划线) -
标签属性
可以用类似的格式来书写
<标签名 属性1 = “ 属性值1” 属性2 = “ 属性值2” … > content </标签名> -
图像标签
<img/>
属性名 值 content
a. src URL 规定显示图像的 URL。
b. alt text 规定图像的替代文本。
c. title text 鼠标放到图片上,显示的文字
d. height pixels 规定图像的高度。
e. width pixels 规定图像的宽度。
5.链接标签 <a href="链接"> </a>
target = _blank ,_self(默认) 规定在何处打开目标 URL。仅在 href 属性存在时使用。
a. 外部链接
b. 内部链接
c. 空链接 #
d. 各种网页元素,如表格,音频,视频等都可以添加超链接
小技巧
- html字符的代码,虽然我记不住,但是写着吧
字符 实体编号 实体名称
" " "
' ' '
& & &
< < <
> > >
× × ×
÷ ÷ ÷
- 页面锚点定位
如何实现本页面的导航效果
首先给一个元素<元素 id="xx">content</元素>
设置一个id
接着在下面的a元素这样处理<a href="xx"> </a>
之后点击这个a元素就能跳转到上面元素的位置,
用这个特性可以来做导航栏
<pre> </pre>
标签
其中的文本不会发生空白折叠,会保持其原有的格式,在bootstrap中默认的pre样式被改为代码块.