HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/u012195214/article/details/51586532

一、HTML的概述（了解）

html是什么：hypertext markup language 超文本标记语言
作用：编写html页面
html语言不是一个编程语言（有编译过程），而是一个标记语言（没有编译过程），html页面直接由浏览器解析执行。

二、HTML的历史（了解）

三、HTML的网络术语（明白）

网页：由各种标记组成的一个页面就叫网页。
主页（首页）：一个网站的起始页面或者导航页面。
标记：<p>称为开始标记 </p>称为结束标记。也叫标签。每个标签都有规定好了特殊的含义。
属性：给每一个标签所做的辅助信息。
xhtml：符合XML语法标准的html。
dhtml：dynamic，动态的。javascript+css+html，合起来的页面就是一个dhtml。
http：协议标准。用来规定客户端浏览器和服务器交互时数据的一个格式。SMTP为邮件传输协议，ftp为文件传输协议。

四、HTML的编辑工具（了解）

notepad 记事本
editplus：语法高亮显示，技巧：根据颜色判断单词是否出错。（不是100%）
ultraedit：根据颜色判断单词是否出错，可以显示二进制数据。
dw（dreamweaver，专业工具）代码提示。

五、HTML的规范（知道）

html是一个弱势语言
html不区分大小写
html页面的后缀名是html或者htm（有一些系统不支持后缀名长度超过3个字符，比如dos系统）
html的结构
1）声明部分：主要作用是用来告诉浏览器这个页面使用的是那个标准。是
html5标准。
2）head部分：不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3）body部分：我们缩写的代码必须放在此标签内。

六、HTML的各种标签（掌握）

明确：每个标签都有私有属性。也都有公有属性。
html中表示长度的单位都是像素。html只有一中的单位就是像素。

body：
        bgcolor：背景颜色
        background：背景图片
        text：文本颜色

1. 排版标签

所有的浏览器默认情况下都会忽略空格和空行。

p：p代表一个段落
属性：align 对齐方式取值：left，right，center
br：代表换行。
hr：代表线条
- color 线的颜色
- size 线的粗细
- width 线的长短，两种写法：1）绝对值 eg：500 2）相对值：50%
- noshade 不要阴影
- align 对齐方式取值：left，right，center
center：内容居中
pre：预定义格式标签，告诉浏览器不要忽略空格和空行。
div：快级标签，必须单独占据一行
- align
span：快级标签，不换行字体标记。

2. 字体标记

h1、h2、h3、h4、h5、h6：定义字体大小
- align
font：字体
- color 字体颜色，颜色的写法有3种：
  - 1）英文单词：red
  - 2）十六进制：#00ffcc
  - 3）RGB（三原色）：new RGB（124,156,23）
- size 字体大小
- face：字体类型
特殊字符：
< 小于< $gt; 大于> & &符号 " 双引号 &apos；单引号
©版权 ™商标空格扩展：&#32464
b：加粗
strong：加粗
i：斜体
em：斜体
u：下划线：
s：中划线（删除线）
sup：上标
sub：小标

3. 图像标记

img：代表是一副图片
属性：src 图片的路径两种写法：
a）相对路径：路径是相对页面所在的路径，两个标记.和..，分表代表当前目录和父路径。
b）绝对路径：
1）以盘符开始的路径 eg：d:\image\a.jpg
2）网络路径 eg：http:\www.baidu.com\images
- width：宽度
- height：高度
- alt：当图片显示不出来的时候代替图片显示的内容
- title：提示性文本
- border：边框
热点：就是特定的位置添加超链。

     <img src="images/1.jpg" width="300" height="300" usemap="#Map" bordr="0" />
            <map name="Map" id="Map">
                <area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
            </map>

4. 清单标记

列表标签：3种
- 无序列表ul 属性：type 取值：disc（默认，实习原点），square（实心方点），circle（空心圆）
- 有序列表ol 属性：type 取值：1（阿拉伯数字，默认），a，A，i，I start：从几开始
- 定义列表dl ：dt 列表项的标题 dd 列表项

eg：

<ul>
  <li>北京</li>
  <li>上海</li>
  <li>广州</li>
<ul>
<dl>
   <dt>第一条</dt>
   <dd>不得随地吐痰</dd>
   <dt>第二条</dt>
   <dd>上课不得迟到</dd>
</dl>

5. 超链接

三种链接方式：
1. 链接到其他页面
2. 锚：指给超链接起个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链接起名字
3. 链接到邮件：进入我的邮箱

    - target：告诉浏览器怎么显示目标页面      
    _self:在同一个浏览器中显示    
    _blank:打开新的浏览器显示        
    _parent:在父窗口中显示
    _top:在顶级窗口中显示

6. 表格标记

table：表格
- border 边框
- width：宽度
- height：高度
- align：表格的对齐方式
- cellpadding：单元格内容到边的距离
- cellspacing：单元格和单元格之间的距离
- bgcolor：背景颜色
- background：背景图片
- bordercolorlight：表格的的上，左边框，以及单元格的右，下边框的颜色
- bordercolordark：表格的右，下边框，以及单元格上，左的边框的颜色
- dir：单元格内容的排列方式取值：ltr 从左到右 rtl：从右到左
tr：行
- dir
- bgcolor
td：单元格
- align 内容的横向对齐方式
- valign 内容的纵向对齐方式 top，middle，bottom
- width 绝对值或者相对值（%）
- height：单元格的高度
  单元格的合并：
  单元格的属性：colspan 横向合并 ；rowspan 纵向合并
th：相对于<td> + <b> （属性同），加粗效果
caption：表格的标题
- align 取值：left，center，right，top，bottom

thead，tbody，tfoot 写与不写的区别：
1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。
2. 如果不写thead，tbody，tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意显示。

7. 框架标记及<iframe>

框架页面不允许有body标签

frameset：框架的集合
- rows：纵向分部框架
- cols：横向分部框架（写法有两种）
  1）绝对值：”200,” ，代表剩余的
  2）相对值：”30%,*”
frame：框架，一个框架显示一个页面
- scrolling：是否需要滚动条。默认是true
- noresize：固定框架大小
- bordercolor：给框架边框起一个颜色
- name：给框架起一个名字
iframe：内嵌框架，嵌入在一个页面上的框架.(仅仅IE支持)
- width：宽度
- height：高度
- scrolling：是否需要滚动条

<frameset rows="200,*">
   <frame src="top.html" noresize scrolling="no" bordercololr="red"></frame>
   <frameset cols="100,*">
      <frame src="left.html" noresize></frame>
       <frame src="right.html"></frame>
   </frameset>
</frameset>

注：内嵌框架：
<iframe src=”” width=”” height=”” scrolling=”no”>:只有IE浏览器支持

8. 表单标签

作用：用来收集数据

<form action="" methods=""><!--提交哪去；提交方式get(显示；限制)/post(不显示)-->
   姓名:<input type="text" value="请输入姓名" size="50" readonly disabled><br>
   密码:<input type="password" value="请输入姓名" size="50" readonly disabled><br>
   隐藏框:<input type="hidden" value="..."<br>
   性别:<input type="radion" name="gender" value="male" checked>男
   爱好:<input type="checkbox" name="love" value="eat" checked>吃饭
    <input type="checkbox" name="love" value="sleep" checked>睡觉
   学历:<selet name="xueli" multiple>
       <option value="大学">大学</option>
       <option value="高中">高中</option>
       <option value="小学">小学</option>
    </selet>
   备注:<textarea rows="5" clos="20">大神留点话吧</textarea>
   <input type="button" value="普通按钮" onclick="alert(this.value)">
   <input type="submit" value="提交按钮">
   <input type="reset" value="重置按钮">
   <input type="image" src="" width="" height="">

   <button onclick="alert("大家好")">普通按钮</button>
</form>

9. 表单的语义化

<form>
   <fieldset>
      <legend>必填信息</legend>
   </fieldset>

   <filedset>
       <legend>选填信息</legend>
   <fieldset/>
</form>

10. 多媒体标记

bgsound：背景音乐
embed：播放多媒体文件
marquee：移动
- direction 移动目标方向 left，right，up，down，up，down移动距离是固定的200px
- behavior：行为方式取值：slide，alternate，scroll
- loop：循环多少圈。负值表示无限循环。
- scrolldelay：移动一次休息多长时间。单位是毫秒。

eg：

<bgsound src="" loop="3"></bgsound>:背景音乐

<embed src="" autostart="no" volumn="100"></embed>：播放多媒体文件

<marquee direction="" behavior="" scrollamout="100" loop="" scrolldelay="1000">我来啦</marquee>：移动

11. 头标记

<html lang="en">
   <head>
        <mata  >
    <mata  >
   </head>

   <body bgcolo="" background="" text="red" alink="bule" vlink="yellow" leftmargin="0" topmargin="0">
    <label onlcik="alert(this.innerHTML)">林志玲</lable>
   </body>