（超详细）前端大学习 ·第一篇 HTML是网页的骨架

---

前言

前端

        解释器 各种各样的浏览器
        编辑器 各种各样的文本编辑器都可以

开发工具    

        常用 vscode    Hbuilderx

vscode

 强大的扩展能力，可用于各种编程语言的开发,只需要安装对应的插件
        （1）安装
        （2）汉化
        （3）在扩展中安装simple chinese
        （4）重启
        （5）前端live Server
        （6）前端轻量服务器 ，用于展示html页面，可以热更新，保存之后效果立马更改，不需要重新运行
        （7）文件 打开文件夹

一、标签

1.1 基础标签

基础标签
        html 根标签
        head 头标签
        body 身体标签

1.2  6种常用标签

div 块标签
    铺满多行
h1-h6
    六级标题
    字体大小变化
    加粗 加黑
    有上下行距
    铺满一行 行级元素
p 段落
    有上下行距
    铺满一行 行级元素
span 隔离标签
    行内元素
br  强制换行
hr  水平分割线

1.3  8 种文本样式标签

加粗  b/strong
加斜  i/em
下划线 u
删除线 del
上标  sup
下标  sub

1.4  6 种列表标签

ul 无序列表
    样式和有序列表一致
    只不过不是序号  是黑点
ol 有序列表
    内部使用多个li
    有序号
    铺满一行
    有上下行距
    左侧有内补
li 列表项目
    一般不单独存在  铺满一行
dl 自定义列表
    外框架
dt 自定义列表项
    顶格出现
dd 自定义列表项目说明(注释)
    可以没有  缩进出现

 1.5   4种表格标签

table 表外框
tr  行
th  表头单元格
td  普通单元格
标签属性 在开始标签对标签进行修饰
    table属性
        border  边框
        cellspacing   单元格间距
        cellpadding   单元格内部
        width   宽度
        align   对齐
    td 属性
        colspan   合并列
        rowspan   合并行

1.6   4种图片视频标签

a超级链接
    href 链接地址
            支持外部服务器地址
            支持本地服务器地址
    target
        _blank 新空白页签打开
        _self  默认当前页签打开
    锚点
        href要以#开头内容和目标元素身上的id属性一致
img 图片
    src 图片地址,本地图片,其他服务器图片
    alt 图片加载失败显示信息
audio 音频
    src 音频地址,网络地址,本地地址
    controls 控件,一般不会使用默认的控件,需要自己绘制控件皮肤
             所有浏览器表现一致，通过js交互完成控制
    autoplay 自动播放 (谷歌禁用了)
video 视频

1.7   1个框架标签

iframe
    嵌入其他页面   网络地址,本地地址
    src 地址路径
    第一次请求原始页面 包含iframe地址 第二次请求iframe地址

1.8  表单标签 可以将用户输入的数据提交到服务器

<button>按钮</button>
表单域 form
    action  服务器地址 默认是当前地址
    method  提交方法
        默认是get 参数以?key=value&key=value..的形式拼接
            测试地址 http://httpbin.org/get
        post 参数是以表单格式的提交
            测试地址 http://httpbin.org/post
表单标签
    input 一般配合label  label中的for要和input的id一致
        type
            text  文本
            password  密码
            submit   提交
            reset  重置
            radio   单选 (checked默认)
            checkbox  多选
            color  颜色
            file  文件
    select
        下拉选项  name写在select上
        结合option
            value写在option上
            带有selected默认选中
    textarea
        多行输入框   可以更改大小
    需要提交到服务器的表单标签一定要有name
    input的value就是需要提交给服务器的值
        当type等于text，password之类的可输入内容，不需要写value
        radio，checkbox需要写value
表单按钮
    input
         submit  提交
         reset  重置

input 属性
    placeholder  提示信息
    required   必填项目
    checked   默认选中
    select    下拉默认选中

隐藏域（做反爬）
   看不见的也会提交到服务器内容
    type为hidden name  csrf_token
                value 口令

二. html5语义化标签

就是div,换了个名字

2.1  

header   头部
nav    导航栏
footer   底部栏
main    主体
section   区域
article     文章
aside   侧边栏

2.2  html的标准属性 所有标签都可以使用的属性

id    单个html文件内部一定要唯一
class   一个标签可以有多个类名  多个类名可以使用空格隔开
        一个类名可以用于多个标签
style  样式 {key:value ;  key:value}
title  鼠标划入提示信息

2.3    html结构快速生成

>  嵌套
*  重复
+  后续  同级别
{} 内容
$  出现在{}中代表一个数字
() 代表分组   不能出现在最一个
lorem  随机段落内容
lorem5 随机5个单词
lorem5-10  随机5-10个单词