HTML学习笔记

一阶段 前端开发基础

1、第一章—前端课前导读

1、网页

1.1 什么是网页

网站时指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读

1.2 什么是HTML

HTML是超文本标记语言，它是用来描述网页的一种语言

标记语言是一套标记标签

所谓超文本有两层含义

1. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）

2、浏览器

2.1 常用浏览器

1. IE浏览器
2. 火狐浏览器（Firefox）
3. 谷歌浏览器（Chrome）
4. Edge浏览器
5. Safari浏览器
6. Opera浏览器

2.2 浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

3、Web标准

web标准的构成：结构、表现、行为，三个方面

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript

2、第二章—HTML

1、HTML常用标签

1.1 标题标签 < h1> - < h6>

代码：

    <h1>
        你是谁啊
    h1>

特点：

1. 加了标题的文字会变的加粗，字号也会依次变大
2. 一个标题独占一行
3. 作为标题使用，并且依据重要性递减

1.2 段落标签、换行标签

<p>…………………………p>

特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行
2. 段落和段落之间保有空隙

<br/>

特点：

1. < br /> 是个单标签
2. 这个标签只是简单的开始新的一行，跟段落不一样

1.3 文本格式化标签

语义	标签	说明
加粗	或	推荐使用
倾斜	或	推荐使用
删除线	或	推荐使用
下划线	或	推荐使用

1.4 div 和span 标签

这俩标签是没有语义的，他们就是一个盒子，用来装内容的

特点：

1. div独占一行
2. span不会独占一行，多个span可以在一行上显示

1.5 图像标签和路径

    <img src="" alt="">

注意：

1. alt 属性是替换文本，图片不能正常显示的时候，显示alt的属性值
2. title 属性是提示文本，鼠标放到图片上，显示的文字

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级
下一级路径	/	图像文件位于HTML文件下一级
上一级路径	…/	图像文件位于HTML文件上一级

绝对路径

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

1.6 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像a>

属性	作用
href	用于指定链接目标的url地址，当为标签应用href属性时，他就有了超链接功能
target	用来指定链接页面的打开方式，其中 _ self为默认值， _ blank 为在新窗口打开

锚点链接

• 在链接文本的 href 属性中，设置属性值为 # 名字的形式，如：< a href="#two">第2级
• 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 如：< h3 id=“two”>第2级

1.7 表格标签

表格的基本语法

    <table>
        <tr>
            <td>单元格的文字td>
        tr>
    table>
    

1.7.1 表头标签

    <table>
        <tr>
            <th>姓名th>
            <th>性别th>
            <th>电话th>
        tr>

作用：加粗、局中显示

1.7.2 表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	数值	规定表格的宽度，默认边框没有宽度
cellpadding	像素值	规定单元边缘与其内容之间的空白，默认1px
cellspacing	像素值	规定单元格之间的空白，默认2px
width	像素值或百分比	规定表格的宽度

1.7.3 表格结构标签

     <table>
         <thead>
            
         thead>
         <tbody>
            
         tbody>
     table>

1.7.4 合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

合并单元格的代码要写在目标单元格的身上

• 跨行：最上侧单元格为目标单元格，写合并代码
• 跨列：最左侧单元格为目标单元格，写合并代码

1.8 无序列表

     <ul>
         <li>列表项li>
         <li>列表项li>
         <li>列表项li>
     ul>

1.9 有序列表

    <ol>
        <li>列表项li>
        <li>列表项li>
        <li>列表项li>
    ol>

1.10 自定义列表

    <dl>
        <dt>名词1dt>
        <dd>名词1解释1dd>
        <dd>名词1解释2dd>
        <dd>名词1解释3dd>
    dl>
    

1.11 表单标签

1.11.1 表单域

    <form action="url地址" method="提交方式" name="表单域名称">
        
    form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

1.11.2 input 输入元素

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户定义	规定input元素的值
checked	checked	规定此input首次加载时应用被选择(焦点)
maxlength	正整数	规定输入字段中的字符的最大长度

1.11.3 type属性的属性值

属性值	描述
button	定义可点击的按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮
text	定义单行的输入字段，最多输入20个字符

1.11.4 单选和复选

        <label for="xb">
            <input type="radio" name="xb" id="xb">男
        label>
        <input type="radio" name="xb" id="">女
        
        <br>
        <input type="checkbox" name="fu" id="">1
        <input type="checkbox" name="fu" id="">2
        <input type="checkbox" name="fu" id="">3

1.11.5 label标签

        <label for="xb">
            <input type="radio" name="xb" id="xb">男
        label>
        

1.11.6 select 下拉表单

        <select name="" id="">
            <option value="">选项1option>
            <option value="">选项2option>
            <option value="">选项3option>
            <option value="" selected>选项4option>
        select>

1.11.7 textarea 文本域标签

        <textarea name="" id="" cols="30" rows="10">
            
        textarea>

3、第三章—CSS

3.1 选择器

3.1.1 标签选择器

格式：标签名 { }

    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
        }
    style>
head>

<body>
    <div>div>
body>

3.1.2 类选择器

格式：.类名 {}

        .one {
            color: red;
        }
    <p class="one">1111p>

3.2 font字体

font的符合写法：顺序不可颠倒

            font: font-style font-wieght font-size/font-height font-family;

• 不能更改属性的顺序
• 必须保留 font-size 和 font-family 属性，否则font不起作用

3.3 文本样式和CSS样式表

3.3.1 color

表示形式	属性值
预定义的颜色值	red、green等
十六进制	#FF0000
RGB代码	rgb(255,0,0)

3.3.2 对齐文本

设置元素内文本内容的水平对齐方式

属性值	解释
left	左对齐，默认值
right	右对齐
center	居中对齐

3.3.3 text-decoration 装饰文本

属性值	描述
none	默认
underline	下划线
overline	上划线（几乎不用）
line-through	删除线（不常用）

3.3.4 文本缩进 text-index

text-index属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

em是一个相对单位，就是当前元素的fon-size，比如当前元素font-size 为16px 。那么1em就是16px

3.3.5 行间距 line-height

3.4 元素显示模式

3.4.1 块元素

有：h1~h6，div，ul，ol，li等

特点：

1. 独占一行
2. 宽度、高度、外边距和内边距都可以控制
3. 默认宽度是父级宽度的100%
4. 里面可以放行内块元素和行内元素

3.4.2 行内元素

有：a，strong，b，em，i，del，s，ins，u，span等

特点：

1. 一行可以显示多个，相邻行内元素在一行上
2. 宽度高度是无效的，默认宽度就是内容的宽度
3. 行内元素只能容纳文本或其他行内元素

3.4.3 行内块元素

有：img、input、等

特点：

1. 和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个
2. 默认宽度就是内容的宽度
3. 高度行高外边距内边距都可以控制

3.5 优先级

选择器	选择器权重
继承或者*	0.0.0.0
元素选择器	0.0.0.1
类选择器，伪类选择器	0.0.1.0
ID选择器	0.1.0.0
行内样式	1.0.0.0
！important 最重要	无穷大

1. 权重不会有进位
2. 从左到右一次判断

3.6 盒模型

3.6.1 边框合并

border-collapse:collapse

3.6.2 外边距合并

1、相邻块级元素垂直外边距的合并

上面的盒子有 margin-bottom 下面的盒子有 margin-top 那么他们的垂直间距不会是两者的和，而是两者中较大的那个的值

如：一个20px 一个10px，最后垂直间距则是20px

2、嵌套块级元素垂直外边距的合并

父元素和子元素都有 margin-top的时候 会有塌陷问题

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加 overflow:hidden

3.7 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必选，水平阴影的位置，允许负值
v-shadow	必选，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影颜色
inset	可选，将外部阴影（outset）改为内部阴影

3.8 文字阴影

text-shadow:水平阴影 垂直阴影 模糊距离 颜色