HTML

一、HTML语言

　　HTML是指超文本标记/标签语言，赋予了单词、字母特殊的功能和意义，并用标签标记，是一种前端网页语言，通常使用VScode。

<html>
      <head>
        <title>  标题  </title> 
      </head>
     <body> 
             网页主体
       </body>
</html>

一个<html></html>标记一个网页
标签要成对出现
一个HTML包括基本的head和body
title表明当前网页的标题，head 声明当前页面的相关信息
body涵盖当前网页的主体，显示页面信息
HTML不区分大小写
HTML开始和结束标签的内容为空时可以让标签自关闭，使用<br/>
标签具有属性，属性要用引号引起来，在开始标签中设置，多个属性用空格隔开，双引号单引号都可以

　VScode 输入！+回车会自动生成HTML语言框架，生成一个简易的HTML文件，通过alt+b可以在默认浏览器中查看编写的HTML网页，使用shift+alt+b可以选用浏览器查看。

1.1 HTML语言使用

1.文件标签

　　body三个属性：

text 文本属性，设置文字颜色 text="red"
bgcolor 背景颜色 bgcolor="blue"
backgroud 设置背景图片 backgroud="img/图片.jpg" ,设置图片时先建立img文件存放图片，静态动态图片都可以

<body text="blue" bgcolor="pink" background="img/20170806232310100.jpg">
    hello，欢迎光临！
</body>

2. 排版标签

注释标签 <！-- 注释文本 -->
换行标签 <br> 或者<br/>，没有换行文本就会在同一行接连出现
段落标签 <p></p> 与换行不同，行与行间隔大，常在开始标签中设置段落对齐格式：居中 align="center" ，默认左对齐
水平线标签 <hr> 会在网页上显示水平线条，可以设置 color 颜色， align 对齐（默认居中）, size 粗细（单位px）,width 宽度（线条所占比例%）
分区标签 <div> </div>相当于一个容器，将一整块区域包裹起来，自动换行，块级元素，看不出效果； <span></span> 是局部划分，行内元素，不会自动换行，使用style="width: 100px;height:30px; background: pink"设置大小和背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排版标签</title>
</head>
<body>
    <div>
        <p>好久不见</p>
        <hr color="red">
        <p>are you ok </p>
    </div>
    <div >
        <br>
        <hr color="blue" size="5px" align="left" width="30%">
        <p  align="center">
            hello
        </p>
        <hr>
        <p align="right">欢迎光临</p>
    </div>
    
    <div style="width:50px;height:30px;background:#c30"></div>
    <div style="width: 100px;height:30px; background: pink"></div>    
    我爱你中国<br>
    <hr>
    love you <br/>
</body>
</html>

3. 字体标签

字体标签 <font></font> 可以设置字体大小（size），颜色（color），字体（face）
标题标签 <h1></h1>自动换行加粗，标题大小在1~6，1最大，6最小，比6大的是段落字体，不具备标题效果
格式化标签加粗<b></b> ; 倾斜<i></i> ; 删除线<del> </del>; 下划线<u></u>

<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <h7>标题7</h7>
    <h8>标题8</h8> <br>
    <font color="red" size="100px" face="楷体">我爱你中国</font> <br>
    <b>hello</b> <br>
    <i>hello</i> <br>
    <del>hello</del> <br>
    <u>hello</u> <br>
</body>

4. 列表标签

有序列表 <ol> </ol>
无序列表 <ul> </ul>
列表中用<li></li>输入列表项
type 设置列表序号形式
- 有序列表下：默认阿拉伯数字排序； type='A'：字母排序； type='I'：罗马排序
- 无序列表下： type="disc"：默认，实心圆； type="square"：方块； type="circle"：空心圆
start 设置列表起始值 start=“3” 序列从3开始

<body>
    <h1>有序标签</h1> <hr>
    <ol start="3">
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
    </ol>
    <ol type="A">
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
    </ol>
    <ol type="I">
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
    </ol>
    <hr>
    <h1>无序标签</h1>
    <ul>
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
    </ul>
    <ul type="circle">
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
    </ul>
    <ul type="square">
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
        <li>西红柿炒鸡蛋</li>
    </ul>    
</body>

5. 图像标签

<img/> 为图片标记
src设置图片路径，动图静图都可
alt 用于图片加载失败时解释描述
title 图片标题，鼠标悬停出现
width，height 设置宽和高，设置单个属性则等比缩放，设置单位为px
border 设置图片边框大小
align 图片对齐格式
- left：把图像对齐到左边
- right：把图像对齐到右边
- middle：把图像与中央对齐
- top：把图像与顶部对齐
- bottom：把图像与底部对齐（默认）

<body>
    <img src="img/t01f59fe896bc74d125.jpg" alt="图像加载失败了"  width="100px" title="hellos" /> <br>
    hello <img src="img/t017e6730377e3c2003.jpg" border="10px" width="400px" height="300px" align="middle"/>  
</body>

6. 超链接标签

<a hred="超链接"> </a> 如果是互联网的网页要加HTTP协议，本地连接直接写链接地址
发送邮件，链接格式为： <a href="mailto:XXX@163.com">联系站长</a>
属性 blank 设置在新窗口打开连接
QQ聊天 <a href="tencent://message/?uin=19998539&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/> </a>

<body>
    <a href="01test.html">本地连接</a> <br>
    <a href="https://i.cnblogs.com/posts/edit;postId=14234770">互联网连接</a> <hr>
    <a href="mailto:rf935317695@163.com">发送邮件</a> <br>
    <a href="tencent://message/?uin=935317695&Menu=yes">
        <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/> qq聊天
    </a>
</body>

7. 表格表单标签

表格标签： <table> </table>

头 <th></th>
行 <tr></tr>
列 <td></td>
border：边框，取值是像素为单位
width 代表的表格的宽度
align 对齐方式；left 左对齐;right 右对齐;center 居中对齐
cellspacing：单元格间距（通常设置0表示单线表格）
colspan：合并列
rowspan：合并行

<body>
    <!--4行3列-->
    <table width="200px" align="center" cellspacing="0" border="1px">
        <tr align="center" > 
            <td colspan="3">计划统计表</td>
        </tr>
        <tr>
            <td rowspan="3">收入金额</td>
            <td>5</td>
            <td>6</td>
            </tr>
        <tr>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            
            <td>11</td>
            <td>12</td>
        </tr>
    </table>
</body>

表单标签
- 表单用于提交一组数据给服务器，<form></form>，属性设置action和method，常见的提交方法为get 和 post
  - get 提交数据量少，提交普通文本数据，不能提交图片等信息，明文传送，在浏览器的url后面会显示提交的数据
  - post 提交数据量大，提交多种数据类型，密文提交
- <input>元素的type属性，input单个出现
  - text：默认值，普通的文本输入框
  - placeholder属性：提示文本
  - maxlength属性：最多能输入字符数量
  - password：密码输入框
  - checkbox：多选框/复选框，可以设置默认选中 checked="checked"
  - radio：单选按钮
  - file：上传文件
  - reset：重置按钮
  - submit：提交按钮
  - button：普通按钮
- <select>：下拉列表/下拉框
  - <option>：可选项
  - 默认选中项：selected：被选中
- <textarea>：文本域（多行文本框）：可以通过 cols 和 rows 属性来规定 textarea 的尺寸
- <button>：按钮：在form表单中，作用和submit一样
注意：
- 所有表单中的元素要有名称，否则提交到服务器后无法识别提交数据元素的不同
- 单选框要具有相同的name
- 复选框以组为单位，具有相同的name

<body>
    <form action="baidu" method="GET">
        <p>
            账号: <input type="text" placeholder="请输入账号..." maxlength="5">
        </p>
        <p>
            密码: <input type="password">
        </p>
        <p> 
            爱好: 
            <input type="checkbox" name="hobby" id="1">抽烟
            <input type="checkbox" name="hobby" id="1" checked="checked">喝酒
            <input type="checkbox" name="hobby" id="1">烫头
            <input type="checkbox" name="hobby" id="1">泡脚
        </p>
        <p>
            性别：
            <input type="radio" name="sex"> 男
            <input type="radio" name="sex"> 女
        </p>
        <p>
            血型：
            <select name="blood" >
                <option  selected="selected">A型</option>
                <option>B型</option>
                <option>AB型</option>
                <option>O型</option>
            </select>
           
        </p>
        <P>
            照片：
            <input type="file">
        </P>
        <p>
            简介： 
            <textarea rows="10" cols="30"></textarea>
        </p>
        <p>
            <input type="reset" value="还原" > 
        </p>
       <p>
           <input type="submit" value="提交" >
       </p>
       <p>
           <input type="button" value="刷新" > 
       </p>
    </form>
    <button name="back">返回</button>
</body>

8. 框架标签

<frame></frame> 与<frameset></frameset>结合使用， cols 横向划分比例，rols纵向划分比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- frame 与 body 不能同时存在 -->
<frameset rows="15%,*,10%">
    <frame src="top.html"></frame>
    <frameset cols="15%,*">
        <frame src="left.html"></frame>
        <frame src="right.html"></frame>
    </frameset>
    <frame src="foot.html"></frame>
</frameset>
</html>

9. 其他标签

<meta>标签必须写在<head>标签之间

<meta charset="UTF-8">  <!-- 字符集--》
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--名字：viewport  数据内容content为device-width, initial-scale=1.0，就是客户端满屏-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--ie=edge表示以当前版本所支持的最高级标准模式渲染-->
<!-- X-UA-Compatible每个电脑内置的IE版本是不一样的，为了兼容所有的版本要以最高级模式渲染文档-->
<meta http-equiv="refresh" content="5;url=http://www.lagou.com">
<!-- refresh刷新 设置页面加载后在指定的时间5秒后跳转到指定的页面-->

<link>书签用于导入CSS，必须写在<head>标签之间
特殊字符：默认空格只输出一个，除非用特殊字符

二、h5（HTML5）新特性

h4与H5区别
- 不区分大小写
- 属性双引号可忽略
- 可以省略结束标签
h5新增语义化标签，见名知意，用于解释容器div所在块的功能，与div没有区别
- section标签：表示页面中的内容区域，部分，页面的主体部分
- article标签：文章
- side标签：文章内容之外的，标题
- header标签：头部，页眉，页面的顶部
- hgroup标签：内容与标题的组合
- nav标签：导航
- figure标签：图文并茂
- foot：页脚，页面的底部

h5的媒体功能 <video> </video>

<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>

h5新增表单属性
- input中的type属性值
  - date 日历
  - month 月历
  - week 周数，当前年份的第几周
  - color 出现调色板
  - number 数值域可以设置最大值 max 最小值 min 以及递增量 step
- 进度条 <progress></progress>
- 高亮 <mark></mark>
- 联想输入框进行模糊查询 <datalist></datalist> 选项用<option></option>

<body>
    input type属性
    <input type="date"> &nbsp;
    <input type="month">&nbsp;
    <input type="week">&nbsp;
    <input type="color">&nbsp;
    数值域<input type="number" max="20" min="10" step="2"><br>
    
    进度条<progress></progress> 
    <h1>I <mark>love</mark> you </h1> 
    滑动条<input type="range"> <br>
    模糊查询<input type="text" list="citys"> <br>
    <datalist id="citys">
        <option value="北京"></option>
        <option value="上海"></option>
        <option value="广州"></option>
    </datalist>
</body>

posted @ 2021-01-05 11:27 forever_fate 阅读(117) 评论(0) 收藏举报

刷新页面返回顶部