HTML学习总结

基本概念

网页和网站

网站由N个网页组成
网页中包含：文字，音频，视频，图片，链接，程序。。
网页的内容由HTML技术实现
网页的后缀通常都是.html

浏览器和渲染引擎

常见的浏览器：谷歌，火狐，欧朋，IE，Safari
不同的浏览器有不同的内核(渲染引擎)

网页三层结构

结构层：使用HTML技术实现。
样式层：使用CSS技术实现(布局，美化)
交互层：使用JS技术实现

开发工具

vscode

快捷键

shift+alt+向下箭头 =>复制上一行
tab =>向后移动代码
shift+tab=>向前移动代码
！+tab=>生成HTML基本骨架
div.box+tab=>生成一个带class属性的div
鼠标中键+向下拽=>同时选中多行
del=>删除键
F2=>重命名 shift+alt+f=>格式化代码
ctrl+f=>查找内容并替换内容

标签，属性，元素

标签与标签之间的关系分为父子关系和兄弟关系

属性：写在开始标签中，以xxx="xxx"的形式出现，一个标签中可以有多个属性
属性分为公有属性和特有属性
公有属性：class,id,title,style
元素：标签+属性+标签之间的内容

HTML基本骨架

文档声明：
告诉浏览器以什么样的标准来解析我们的代码
html元素：是一个网页的根元素，只有这一个
lang属性：指定网页的语言，zh—CN代表中文，en代表英文。
head元素：网页的头部，基本上对网页的设置都会在head实现
title属性：指定网页标题
meta属性：charset="utf-8"如果不指定，会出现乱码
body元素：网页的主要内容都是写在body中的

常用标签

标题标签：

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

h1-h6逐级递减

段落标签：

<p>这是一个段落</p>

换行标签：

<br/>

文本格式化标签：

<strong>加粗</strong>
<en>倾斜</en>
<del>删除线</del>
<ins>下划线</ins>

无语意标签：

<div>这是一个div</div>
<span>这是一个span</span>

图片标签：

<img src="" alt="">
 <!-- 
        src：图片路径（来源）
        alt：当图片加载错误时显示的文字
        title：当鼠标悬停在图片上显示的文字
        width：图片的宽度
        height：图片的高度
        border：图片的边框
        
        属性之间不分先后顺序
        属性名与属性值以键值对的形式存在
        属性名与属性值之间以等号分隔，属性值要用引号包裹
  -->

路径和链接：
路径分为相对路径和和绝对路径
相对路径：1.在同一个文件夹直接找名字　2.向上一级../ 　3.向下一级/
绝对路径:　例：D:\文件\html\软件
链接标签:

    <!--  -->
    <a href=""></a>
    <!-- 外部链接 -->
    <a href="http://baidu.com"></a>
    <!-- 内部链接 -->
    <a href="./作业-百度效果/images/logo_baidu.jpg"></a>

属性：
href：指定跳转页面
title：鼠标悬停时显示的文字
target：_self（默认会覆盖原来的窗口）　_blank（会以新的窗口打开）　窗口的打开方式
#：会阻止页面跳转，但是会刷新页面
锚点：
链接使用#
目标标签id与链接#号后面一致
注释与特殊字符：

列表类标签：

无序列表：

<ul>
      <li></li>
      <li></li>
      <li></li>
</ul>

有序列表：

 <ol>
      <li></li>
      <li></li>
      <li></li>
 </ol>

自定义列表：

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

表格类标签：

<table>
        <!-- caption表格的标题 -->
        <caption>标题</caption>
        <!-- thead结构头 -->
        <thead>   
            <!-- tr定义表格行 -->
            <tr>
                <th>表头</th>
                <td>单元格</td>
            </tr>
        </thead>
        <!-- tbody结构体 -->
        <tbody>
            <tr>
                <th>表头</th>
                <td>单元格</td>
            </tr>
        </tbody>
        <!-- tfoot结构尾 -->
        <tfoot>
            <tr>
                <th>表头</th>
                <td>单元格</td>
            </tr>
        </tfoot>
</table>

表格的属性：

border：表示表格的边框，默认值为0
width：宽度
heigth：高度
cellspacing：单元格与单元格之间的距离
cellpadding：单元格与内容之间的距离
algin：left/center/right 位置设置
注：当给表格设置居中整个表格会居中（文字不会居中）当指定tr或td文字居中
colspan：列合并
rowspan：行合并

表单类标签

input属性：

text：文本框
password：密码框
radio：单选按钮
checkbox：复选按钮
reset：重置按钮，配合form表单才有作用
submit：提交按钮
image：属性src
file：文件按钮，上传图片
checked属性：默认选中
name属性：1.发送后台　　2.name的标识对于单选按钮，只能选择一个
value属性：文本框中默认显示的文字

label用法：

    <!--第一种用法  -->
    <label>请输入<input type="text"></label>
    <!--第二种用法  -->
    <label for="a">请输入</label>
    <input type="text" id="a">

textarea：文本域
下拉列表

 <select name="" id="">
        <option value="">请选择</option>
        <option value="">苹果</option>
        <option value="" selected>香蕉</option>
 </select>

selected：下拉列表的默认选中

form表单

主要作用：收集用户信息，发送后台
action：提交后台的地址
method="get/post"提交（传输）后台的方式
name="a"告诉服务器由那个表单提交过来的