HTML阶段性知识梳理笔记（1）

HTML阶段性知识梳理笔记（1）

1.web第一门编程语言：JavaScript；

HTML不是一门编程语言，它是标记语言。

2.html,css,js的关系：

网页三要素：

• html：好比女生素颜的脸，用于网页框架的构建（网页的结构）；
• CSS：化妆的脸，对网页进行样式设置，使网页更美观（网页的装饰）；
• JavaScript：会哭会笑的脸 ，网页的事件、动态，对网页的操作做出反应，例如：点击某个按钮跳转到某个页面；

3.HTML

生成文档结构的快捷键：英文输入状态下输入 ！或者html:5然后回车
注释：ctrl+/  <!-- -->  注释不显示在页面上，作用是开发人员用来提示代码区域内容;

4.常用实体

• &nbsp； 空格
• &lt；<
• &gt；>

5.块级行内元素

5.1块级：div 、p、h1~h6、ul->li、ol->li、dl->dd/dt、文档结构中的元素；

特点：

• 独占一行
• 宽度默认100%，如果有父元素的话，100%相对父元素而言，没有就相对浏览器视图区而言。
• 高度由子元素高度决定（撑起来）
• 块级可以直接设置宽高
• 块级可以包含块级和行内

5.2行内：span、img、a、strong、b、i、em、sub…

特点：

• 与其他行内元素共享一行空间
• 宽高由自身决定
• 由于不用来搭建网页结构，所以也无需通过css指定其宽度
• 行内元素中不可以嵌套块元素

a:

链接外部或内部网址 
href="相对路径./ ../ \绝对路径 http://ip:端口号/项目/文件名" 
经典应用: 锚点、定义锚点、链接锚点 

• 给一个跳转按钮也就是触发跳转的按钮，< a >回到顶部< a >
• 要跳转到位置：< div id=“center”>找到我< /div>
• < a href="#center">返回顶部< /a>

target:

定义点击后的页面加载的位置，默认为"_self"; "_blank" 为在空白页打开。 

img：

图片标签属性：
src     图片地址 
width   图片宽度 
height  高度 
alt     图片加时出现问题提示的信息 
title   鼠标悬停时的提示文字 

6.块级元素与行内元素的区别 面试题80%会涉及

• 块级元素独占一行，行内元素与其他行内元素共享一行
• 块级可以直接设置宽高，行内不可以直接设置宽高。
  img input 是特殊的行内元素，置换元素。
• 块级元素可以包含块级和行内，行内只能包含行内，需要通过设置display改变元素属性来设置宽高。

---

7.列表元素

7.1 无序列表 ul、li

给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分
样式：

    <ul type="value">
        <li>要展示的数据</li>
    </ul>
    value可取：
    disc    默认值 实心圆
    circle  空心圆
    square  实心方块

7.2 有序列表

​ 有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分

样式：type的值默认为数字1

<ol type="A"></ol>
1   默认值。数字有序列表。（1、2、3、4）
a   按字母顺序排列的有序列表，小写。（a、b、c、d）
A   按字母顺序排列的有序列表，大写。（A、B、C、D）
i   罗马字母，小写。（i, ii, iii, iv）
I   罗马字母，大写。（I, II, III, IV）

7.3 定义列表

给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息

8.表格

一对table标签就是一个表格
一对tr标签就是表格中的一行
一对td标签就是一行中的一个单元格

<table>
    <tr>
        <td>内容</td>
    </tr>
</table>

注意点

1.表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
2.表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
3.可以给table标签和td标签使用
表格的宽高：默认是按照内容的尺寸来调整的
手动改变：table的height和width
单元格的宽高：td的height、width
（行内样式：style=“color:red;background-color：white；” 优先级最高）
4.表格内单元格的水平、垂直对齐
水平：align；
table（表格水平对齐方式）
tr,td（当前单元格内容对齐方式）
垂直：valign；（同上水平）
5.表格外边距和内边距属性
cellspacing外边距：单元格与单元格之间的距离，默认为2px
cellpadding内边距：单元格与内容之间的距离
6.单元格合并
colspan：水平方向上合并，即合并列；
rowspan：垂直方向上合并，即合并行；

9.表单

<form>
    <表单元素>
</form>

表单元素

input输入框：

-明文输入框 
<input type="text" name="account">
name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值 的结构 

-暗文输入框 
<input type="password">

-输入框设置默认值 
<input type="xxx">

-单选框 
<input type="radio">
单选框互斥操作：给每个单选框设置相同的name属性的值，默认选中属性：checked; 

-多选框 
<input type="checkbox" name="xxx" value="xxx">
多选框默认选中 checked
-提交按钮 

<input type="submit">
作用: 将表单中已经填写好的数据, 提交到远程服务器(action属性：服务器地址) 
【注意】：若想提交表单数据给后台需要表单元素有使用name属性

-普通按钮 
<input type="button" value="xxx">
可以通过value属性来给按钮指定标题 

-图片按钮 
<input type="image" src="">

-重置按钮 
<input type="reset" value="xx">
作用: 用于清空表单中已经填写好的数据
按钮 
<input type="button" value="xxx">
可以通过value属性来给按钮指定标题 

-图片按钮 
<input type="image" src="">

-重置按钮 
<input type="reset" value="xx">
作用: 用于清空表单中已经填写好的数据