HTML4

开发者文档：

W3C官网：www.w3c.org
W3School：www.w3school.com.cn
MDN：developer.mozilla.org

1、HTML标签属性

HTML标签属性用于给标签提供附加信息，可以写在起始标签或单标签中。有些特殊的属性，没有属性名，只有属性值，如<input disabled>。

注意：

不同的标签，有不同的属性，也有一些通用的属性；
属性名、属性值不能乱写，都是W3C规定好的；
属性名、属性值都不区分大小写，单推荐小写；
双引号，也可写成单引号，甚至不写都行，但还是推荐写双引号；
标签中不要出现同名属性，否则后写的会失效。

2、块级元素和行内元素

块级元素：独占一行。

行内元素：不独占一行。

规则：

块级元素中能写行内元素、块级元素（几乎什么都能写）；
行内元素中能写行内元素，但不能写块级元素；
h1-h6不能互相嵌套；
p标签中不能写块元素。

3、文本标签

文本标签用于包裹词汇和短语等，通常写在排版标签（如h1，div）里面。排版标签更宏观（大段的文字），文本标签更微观（词汇、短语），文本标签通常都是行内元素。

常用的文本标签：

em：要着重阅读的内容，双标签；
strong：十分重要的内容（语气比em要强），双标签；
span：没有语义，用于包裹短语的通用容器，双标签。

4、图片标签

<img>常用属性：

src：图片路径；
alt：图片描述；
width：图片宽度，单位是像素；
height：图片高度，单位是像素。

注意：

像素（px）是一种单位；
尽量不同时修改图片的宽和高，可能会造成比例失调；
暂且认为img是行内元素；
alt属性的作用：① 搜索引擎通过alt属性，得知图片的内容；② 当图片无法展示的时候，有些浏览器会呈现alt属性的值；③ 盲人阅读器会朗读alt属性的值。

5、超链接

<a>的主要作用是从当前页面进行跳转。

常用属性：

href：要跳转的具体位置；
target：跳转时如何打开页面，常用值如下：① _self：在本页中打开；② _blank：在新标签页中打开。

注意：

代码中的多个空格，多个回车，都会被浏览器解析成一个空格；
虽然a是行内元素，但a元素可以包裹除它自身外的任何元素。

跳转到文件<a href='./resource/xxx.zip'>内部资源</a>时：

若浏览器无法打开文件，则会引导用户下载；
若想强制触发下载，请使用download属性，属性值即为下载文件的名称。

跳转到锚点（网页中的一个标记点）的步骤：

设置锚点：<a name='test1'></a>或<h2 id='test2'>我是一个位置</h2>。注意：① 具有href属性的a标签是超链接，具有name属性的a标签是锚点；② name和id都是区分大小写的，且id最好别是数字开头。
跳转锚点：

<!-- 跳转到test1锚点-->
<a href='#test1'>去test1锚点</a>

<!-- 跳转到本页面顶部 -->
<a href='#'>回到顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href='demo.html#test1'>去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->
<a href=''>刷新本页面</a>

<!-- 执行一段js，如果还不知道执行什么，可以留空：javascript:; -->
<a href='javascript:alert(a);'>点我痰喘</a>

唤起指定应用：

<!-- 唤起设备拨号 -->
<a href='tel:10010'>电话练习</a>

<!-- 唤起设备发送邮件 -->
<a href='mailto:10010@qq.com'>邮件练习</a>

<!-- 唤起设备发送短信 -->
<a href='sms:10086'>短信联系</a>

6、列表

<!-- 有序列表 -->
<h2>要把大象放冰箱总共分几步</h2>
<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进入</li>
    <li>把冰箱门关上</li>
</ol>

<!-- 无序列表 -->
<h2>我想去的几个城市</h2>
<ul>
    <li>成都</li>
    <li>上海</li>
</ul>

<!-- 自定义列表 -->
<h2>如何高效地学习？</h2>
<dl>
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习地一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来地代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常，改正后并记住，就是经验</dd>
</dl>

7、表格

table:表格；caption：表格标题；thead：表格头；tbody：表格主体；tfoot：表格注脚；tr：每一行；th、td：每一个单元格（表格头部用th，表格主体、表格脚注中用td）。

注意：

<table>元素地border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题后期靠css控制；
给某个th或td设置了宽度之后，他们所在的那一列的宽度就确定了；
给某个th或td设置了高度之后，他们所在的哪一行的高度就确定了。

表格跨行跨列：rowspan：指定要跨的行数；colspan：指定要跨的列数。

8、常用标签补充

br：换行，单标签；
hr：分隔，单标签。
pre：按原文显示，一般用于在页面中嵌入大段代码，双标签。

注意：

不要用<br>来增加文本之间的间隔，应使用css的margin属性；
<hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成。

9、表单

<form>表单属性：

action：用于指定表单的提交地址；
target：用于控制表单提交后，如何打开页面。_self在本窗口打开，_blank在新窗口打开。
method：用于控制表单的提交方式。

fieldset与legend标签的使用：fieldset可以为表单控件分组，legend标签是分组的标题。

10、框架标签

name：框架名字，可以与target属性配合；
width：框架的宽；
height：框架的高度；
frameborder：是否显示边框，0不显示，1显示。

iframe标签的实际应用：在网页中嵌入广告，与超链接或表单的target配合，展示不同的内容。

11、HTML实体

在HTML中我们可以用一种特殊的形式内容，来表示某个符号，这种特殊形式的内容，就是HTML实体。比如小于号<用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符实体。

字符实体由3部分组成：一个&和一个实体名称（或者一个#和一个实体编号），最后加上一个分号。

12、HTML全局属性

id class style dir title lang 等。

13、meta 元信息

<!-- 针对IE浏览器地一个兼容性设置-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对移动端设备-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 配置网页关键字 -->
<meta name='keywords' content='网上购物，电商购物，皮鞋，化妆品'>
<!-- 配置网页描述信息 -->
<meta name='description' content='哈哈购物网成立于2003年...'>
<!-- 针对搜索引擎爬虫配置 -->
<meta name='robots' content='xx'>
<!-- 配置网页作者 -->
<meta name='author' content='tony'>
<!-- 配置网页生成工具 -->
<meta name='generator' content='Visual Studo Code'>
<!-- 配置定义网页版权信息-->
<meta name='copyright' content='2023-2027版权所有'>
<!-- 配置网页自动刷新 -->
<meta http-equiv='refresh' content='10;url=http://www.baidu.com'>

end

posted on 2024-11-03 14:58 啊噢1231 阅读(61) 评论(0) 收藏举报

刷新页面返回顶部

aoe1231