HTML简介和网页结构

1 HTML简介和网页结构

Web前段标准是一系列的标准，它由如下技术组成：

• HTML :结构标准
• CSS: 样式标准
• JavaScript:行为标准

1.1 网页基本结构

html指的是超文本标记语言(Hyper Text Markup Language)，
html是专门写给浏览器去看的语言，
html并不是编程语言

html的作用

早起的html网页一开始就是用来传递信息的，最开始的html类似于短信，随着互联网的发展网页也变得越来越复杂，这些都归功于css和html的作用。所以html的作用是：对网页进行排版和结构搭建，分类，控制网页中的信息文字

html标签语法

每一门语言都是自己的语法，html是负责网页结构的，它也有它的语法

网页的基本结构由四对标签组成:

• html:表示网页的整体
• head:表示网页的头部，它里面的内容都是设置给浏览器看的
• body:表示网页的主题，是网页的显示区域，是展示给用户看的内容
• title:表示网页的标题，需要写在head里面

2 html 标签

2.1 语义标签

语义标签将其内部的数据赋予不同的含义

2.1.1 h

标题标签，有1-6级，h1最大，h6最小

2.1.2 p

段落标签，它会将内部的信息编译成一个段落

2.2 文字控制标签

对文字的控制，比如文字颜色，文字大小，文字字体，都是一个font标签控制，修改哪部分文字就用font选中，然后修改它的标签属性

2.2.1 font

采用键值对的基本格式，多个属性之间通过空格隔开 k= "v"

<font color = "#FF0004" size = "7" face = "宋体" >我们的发的科技力量多孔菌科家</font>是看得见风景啊楼上的房间空间里上课看看大家

• size:字号大小 有限制的，最大是7，最小是1
• color：控制文字的颜色，值可以是颜色值，也可以设置英文名称
• face：对应的是字体

2.3 水平分割线标签

2.3.1 hr

hr表示水平分割线，它是一个单标签，因为不需要选中任何的信息
标签的属性：

• width:宽度
• size：粗细大小，没有限制
• color：颜色
• align：水平对齐方式，值有三个：left center right
  注意事项：标签中有哪些属性都是规定不能乱加的：比如段落和标题标签接受align属性

2.4 body 标签的属性

2.4.1 bgcolor 背景颜色

2.4.2 background 背景图

注意事项：在web前端标准中，背景图永远在背景颜色的上面

2.5.1 <br /> 也是单标签

换行，分割前后的文字进行换行
在编码中的空格并不能起到换行的作用，因为浏览器不识别, 它不是标签，他是个特殊字符，代表一个空格，多个空格的话就多个 就行了

 我们好开心 <br>
 一天天  <br>
 一年年  <br>
 一夜夜夜 <br>

2.5.2 b

加粗

2.5.3 u

下划线

2.5.4 i

倾斜

图片控制标签

图片控制都是通过img标签控制的
标签属性：

• src : 表示图片的路径，必备属性
• width ：图片的宽度
• height ：图片的高度
• border：边框
• title：鼠标移上去显示的提示文本，也就是图片的标题
• alt：当图片不能正常显示的替换文本

img标签实现等比例的方法是指设置宽高其中的一个值，另外一个由计算机自动计算

 正常的 <br><br>
    <img src="llq.jpg" alt="">

    <br><br>

    指定宽高 <br><br>
    <img src="llq.jpg" alt="" width="200" height="200">

    <br><br>
    带边框 <br><br>
    <img src="llq.jpg" alt="" width="200" height="200" border = "2" >
    
    <br><br>
    等比缩放 只要设置长或者宽一种就行<br><br>

    <img src="llq.jpg" alt="" width="100" >

    <br><br>
    提示文本<br><br>
    <img src="llq.jpg" alt="" width="100" title="余文乐">

    <br><br>
    替换文本 就是当图片没有加载出来的时候 显示的替换文字<br><br>
    <img src="llq1.jpg" alt="没有加载出的图片" >

2.6 列表标签

2.6.1无序列表

ul<li

ul表示列表的整体，li表示列表项
标签属性：type 作用是控制列表样式

• circle:小圆圈
• disc：小圆点，默认
• square：小方块

<h3>无序列表基本样式</h3>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>

    <h3>列表样式</h3>
    <ul type = "circle">
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
            <li>列表项5</li>

    </ul>


    <h3>列表样式2</h3>
    <ul type = "circle">
            <li type = "square">列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
            <li>列表项5</li>

    </ul>

2.6.2 有序列表

列表样式：1，a，A ，i，I

<h3>有序列表基本样式</h3>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ol>

    <h3>有序列表样式</h3>
    <ol type = "a">
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
            <li>列表项5</li>

    </ol>


    <h3>有序列表样式2</h3>
    <ol type = "i">
            <li type = "square">列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
            <li>列表项5</li>

    </ol>

2.6.3 项目列表或者自定义列表

结构基本：
dl>dt+dd
dl表示项目列表的整体，dt表示项目/标题，dd表示详情/描述

2.7 相对路径

相对路径是指查找文件的一种关系，它的原理是从文件自身出发去查找目标文件

相对路径的三种查找方式:

• 同级查找：直接写文件名称即可找到: src = "pic.jpg"
• 向下查找： 文件夹名称/文件名 :src = "img/pic.jpg"
• 向上查找: ../表示向上一级：src=../pic.jpg
  无论哪种查找方式，都需要写文件全称，注意后缀，最好以后的路径都采用相对路径

相对路径要求：

• 相对路径不能跨盘符查找
• 相对路径的过程不能有中文

2.8 超链接标签

超链接标签通过a表示，它有一个必备的属性是href，作用是设置跳转的路径

    <a href="https://www.jianshu.com">跳转到简书首页</a>
    <br><br>
    <a href="https://www.baidu.com">跳转到百度首页</a>
    <br><br>
    <a href="javasript:;">假链接javascript</a>
    <br><br>
    <a href="#">假链接#</a>
    <br><br>
    <a href="https://www.jianshu.com"><img src="llq.jpg" alt=""></a> 
    <br><br>
    <a href="https://www.jianshu.com" target="_blank">新建窗口跳转到简书首页</a>

2.10 表单元素

简介：在HTML中，标签，标记，元素，节点，指的都是同一个意思，指的都是标签

什么表单：表单是一类特殊的标签，它是由用户来操作的一类标签，专业的称之为跟用户发生交互的这类标签都可以称之为表单元素，例如：按钮，下拉菜单，输入框等

2.11 下拉菜单

基本结构:selet>option
selet表示下拉菜单的整体，option表示下拉项，设置哪项默认被选中的方式:seleted="seleted"

<select >
        <option >请选择</option>
        <option selected = "selected">陈冠希</option>
        <option >余文乐</option>
        <option >周柏豪</option>
 </select>

2.12 form表单

form标签表示表单整体，它具有发送功能，作用是将其内部收集到的数据发送给后台，它有一个必备属性，action，作用是设置后台发送地址，但我们一般留给后台人员去设置

2.13 input标签

input标签是表单元素核心，它有不同的累心哥，通过type属性进行设置

• text ：文本输入框
• password ：密码输入框
• submit ： 提交表单按钮
• reset ： 重置表单按钮
• checkbox：复选框按钮
• file：上传文件组件
• button：普通按钮
• image：图片按钮，必须设置src属性，作用是引入图片

注意事项：

• 默认带有文字的按钮可以通过value属性设置
• 单选框按钮成为真正单选的设置的方法是将单选按钮都设置成同一个name属性值
• 设置单选框和复选框默认选中状态都属性：checked="checked"

2.14 textarea 文本域输入

表示文本域标签，作用是输入大端文字