前端——HTML

2019/04/10 10:10
阅读数 18

作者:凌逆战

地址:https://www.cnblogs.com/LXP-Never/p/11229886.html


   HTML称为超文本标记语言,不属于编程语言的范畴,HTML使用标记标签描述网页。HTML运行在浏览器上,由浏览器来解析。网页运行在浏览器上,是数据展示的载体。网页由浏览器服务器协议组成。

  • 服务器:向服务器发送用户请求指令并接收和解析数据展示给用户。
  • 服务器:存储数据,处理并响应请求。
  • 协议规范数据在传输过程中的打包方式

网页有两大优势即时响应无需安装和更新

  • 即时响应更新服务端页面即完成更新,客户端重新加载即兑现内容。
  • 无需安装和更新无需安装任何应用软件,只需要一个浏览器执行即可。

开发前的准备

  • 运行环境:浏览器,默认选择chrome浏览器,作为网页文件的运行环境。
  • 调试工具:浏览器自带的调试工具,使用快捷键"F12"或右键"检查"打开。
  • 开发工具:不限,选用个人习惯的即可。(Sublime、VSCode、pycharm、EditPlus、Webstrom等)

语法介绍

  HTML又称为超文本标记语言,超文本标记语言能够让浏览器识别和解析的语言,通过标签的形式构建页面结构和填充内容。HTML书写的网页文件使用.html.htm作为文件后缀。

代码基本结构

  每个网页基本的代码结构,都是由以下代码结构组成的。通过下面的代码可知,每个网页都是由HTML标签代码 + JS代码 + CSS样式代码 组成的。HTML代码不区分大小写,建议都小写。CSS、JS、HTML的注释语法都不同,其实注释语法不需要特别记忆,只需要ctrl+/ 快捷键就能自动注释(pycharm默认编辑器,点setting>Languages&Frameworks>python Template Languages>HTML>Template Languages>none)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*网页CSS样式代码*/
    </style>
</head>
<body>
<!--    HTML标签结构-->

    <script>
        // 网页事件,JS代码
    </script>
</body>
</html>

代码解析:

<!DOCTYPE html>:这句话告诉浏览器,使用HTML5标准来解析这个网页

<html>:HTML文档开始的标志和文档结束标记

<head>:网页的头部,可在head中设置网页标题,还可以引入外部的资源文件

<title>:包含文档的标题

<body>:网页的身体,包含可见的页面内容

<!--注释-->:注释

<script>:网页的事件,包含Java Script代码

<style>:网页的样式,包含css代码

HTML标签

HTML标签也会成为标记或元素,用于网页中标记内容,是由< >包围的关键词成对出现的,标签名不区分大小写,推荐小写表示。标签对中第一个标签是开始标签,第二个标签是结束标签。

<标签>内容</标签>

标签分为行内标签(inline)块标签(block)

  • 行内元素:每个行内元素独占一行,高和外边距不可改变;宽度就是他的文字和图片宽度;内联元素只能容纳文本或者其他的内联元素。常用的行内元素有:<span>、<a>、<br>、<input>、<img>
  • 块元素:块元素总是在新的一行上开始,且多个块元素能同时在一行;高度、行高以及内外边距都可以设置;宽度缺省是他的容器的100%,除非设定一个宽度。块元素可以容纳其他块元素和内联元素,p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素。常用的块元素有:<div>、<h1>~<h6>、<form>、<hn>、<ul>、<table>

HTML标签分为双标签单标签

  • 双标签:成对出现,包含开始标签和结束标签 <html></html>
  • 单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合,也可以不加“/”。<br>或者<br/>都可以

标签的属性:标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。

同一个标签中可以添加若干组标签属性,使用空格间隔。

<img src="imgs/img01.jpg" width="200px" height="200px">

标签嵌套:在双标签中书写其他标签,称为标签嵌套;

标签元素的嵌套关系嵌套结构中,外层元素称为父元素,内层元素称为子元素;多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素;平级结构互为兄弟元素

常用标签

<!doctype html>文档类型声明,便于浏览器正确解析标签及渲染样式

<!doctype html>

<html> </html>:HTML文档开始的标志和文档结束标记

<html> </html>

<head>头部元素

头部设置,可在head中设置网页标题,引入外部的资源文件

 <head>元素中可以插入 <title>、<script>、<style>、<meta>、<link>、 <noscript>、<base>

<base> </base>:设置网页的默认URL,因此该网页的其他 src 可以使用相对路径。案例

<head>
  <base href="http://www.runoob.com/images/" target="_blank">
</head>

<link> </link>:定义了一个文档和外部资源之间的关系。通常用来链接样式

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> </style>:可以定义文档样式文件引用地址;也可以直接在<style>中添加样式

<head>
  <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
  </style>
</head>

<meta>元素:定义基本的元数据,以供浏览器解析。

<meta>标签有以下作用:

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者

<meta name="author" content="Runoob">

每30秒刷新当前页面

<meta http-equiv="refresh" content="30">

设置网页字符编码,如果中文出现乱码,可以设置编码格式为utf-8,或者gbk。

<meta charset="utf-8">

<script> </script>:定义JavaScript脚本文件,或者写JS代码

通过 JavaScript 输出 "Hello world":

<head>
    <script>
        document.write("Hello World!")
    </script>
</head>

<title> </title>:设置网页标题,显示在网页选项卡上方

<title>网页标题</title>

<body>主体元素

</body>网页主体部分,显示网页主要内容

<body>
   网页主体内容
</body>

接下来连在一起窥探一下网页的基本结构框架。

<!-- HTML文档开始的标志 -->
<html> 
   <!-- 头部设置,可在head中设置网页标题,引入外部的资源文件 -->
   <head>
       <!-- 设置网页标题,显示在网页选项卡上方 -->
       <title>网页标题</title>
       <!-- 设置网页字符编码 -->
       <meta charset="utf-8"> 
   </head>
   <!-- 网页主体部分,显示网页主要内容 -->
   <body> 
       网页主体内容
   </body>
</html><!-- 文档结束-->

文本标签

标题标签

自带加粗效果,从h1~h6字体大小逐级递减

<h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

段落标签<p></p>

<p>段落文本</p>

属性:

  • title="文字":鼠标移上去显示的文字
  • style="text-align:center":文本居中

文本格式化标签

<b><strong>加粗文本

<i><em>:定义斜体文本

<u><del>删除线

<ins>下划线

<big> & <small>放大字体 & 缩小字体

<sub><sup>下标(块元素) &  上标(块元素)

<pre>:定义预格式文本,被包裹的文本 是什么格式就以什么格式输出

<address>:定义地址

<bdo>:定义文字方向,rtl:从右向左,ltr:从左向右

<span>:行分区,用于对特殊文本进行特殊处理

<br>:换行,单标签

<hr>:水平线,单标签

  某些情况下,浏览器会将一些特殊字符按照 HTML 的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写。

使用 &lt; 在页面中呈现 "<"
使用 &gt; 在页面中呈现 ">"
使用 &nbsp; 在页面中呈现一个空格
使用 &copy; 在页面中呈现版权符号"©"
使用 &yen; 在页面中呈现人民币符号"¥"

区域块

块级元素在浏览器显示时,通常会以新行来开始。

块级容器 <div> </div>

<div>元素没有特定的含义,由于它是块级元素,浏览器会在其前后拆行,<div>元素常用于文档布局结构划分,结合CSS实现网页布局

快捷键: div#top

<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

行内容器 <span> </span>

<span>元素没有特定的含义,由于它是内联元素,因此可以在同一行显示。

媒体标签

图片标签 <img>

<img src="" alt="">:用于在网页中插入一张图片

<img href="#top" src="" width="" height="" title="鼠标停留时显示" alt="图片加载失败">

属性:

  1. href:锚, 可以快速定位到锚所对应的位置.
  2. src:用于给出图片的URL,必填。
  3. alt:用于设置图片加载失败后的提示文本
  4. width/height:用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
  5. title:用于设置图片标题,鼠标悬停在图片上时显示

<map name=""></map>:定义图像地图,name值要等于<img>的usemap属性值。

<area></area>:定义图像地图中可点击的区域

属性

  • coords:规定区域的坐标
  • href:规定区域的目标 URL
  • shape:规定区域的形状。default(默认)、rect(矩形)、circle(圆圈)、poly(连接线)

如果规定的区域是矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

如果规定的区域是园:(圆心坐标为(X1,y1),半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

合在一起使用

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

音频标签<audio> 

<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
</audio>

<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。

属性:

  • autoplay:音频就绪后立马播放
  • controls:显示音频控件(播放/暂停 按钮)
  • src:规定音频文件的URL
  • loop:循环播放
  • muted:静音播放

视频 <video> 

  <video> 元素提供了 播放、暂停和音量控件来控制视频。<video>分别支持MP4、WebM、Ogg格式的音频。<video> 元素支持多个 <source> 元素,<source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

<video width="320" height="240" controls>
    <!--浏览器将使用第一个可识别的格式-->
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <!--提供给不支持 video 元素的浏览器显示的-->
    您的浏览器不支持 HTML5 video 标签。
</video>

图形标签 <canvas> </canvas>

  <canvas>标签用来定义图形容器,必须通过脚本(JavaScript)来绘制图形。

绘制画布

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</
canvas>

Canvas 坐标

  绘制正方形fillRect(x1,y1,x2,y2),使用JavaScript来绘制图像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c = document.getElementById("myCanvas"); //找到 <canvas> 元素对象
    var ctx = c.getContext("2d");   //创建 context 对象
    ctx.fillStyle = "#FF0000";  // ctx对象填充红色样式
    ctx.fillRect(0, 0, 150, 75);    //ctx对象填充正方形(x1,y1,x2,y2)
</script>

注意:getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Canvas 路径

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c = document.getElementById("myCanvas");//找到 <canvas> 元素对象
    var ctx = c.getContext("2d");//创建 context("2d") 对象
    ctx.moveTo(0, 0);       //定义线条开始坐标
    ctx.lineTo(200, 100);   //定义线条结束坐标
    ctx.stroke();    //使用stroke()方法来绘制线条
</script>

 

Canvas 圆形

arc(x,y,r,start,stop)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

 

Canvas 文本

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等,各种形状可以自己定义不同的颜色

  • createLinearGradient(x, y, x1, y1) - 创建线条渐变
  • createRadialGradient(x, y, r, x1, y1, r1) - 创建一个径向/圆渐变
  • addColorStop()方法指定停止颜色,必须使用两种或两种以上停止颜色,参数使用坐标来描述,可以是0至1.
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    // 创建渐变
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");

    // 填充渐变
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
</script>

Canvas - 图像

drawImage(image, x, y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

超链接标签

  用户可以点击超链接实现跳转至其他页面,默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带有下划线
  • 点击链接时,链接显示为红色并带有下划线
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

属性:

  1. href:锚,用于设置目标文件的URL,也可以指向某个id号属性的元素,必填。
  2. target:用于设置目标文件的打开方式,默认在当前窗口打开。
    • target="_self":当前窗口打开
    • target="_blank":新建窗口打开
    • target="_top":回到网站首页
    • target="_parent":回到上一界面

列表标签

无序列表 ul>li

默认用实心圆点标识列表项

快捷键: ul>li*3

<ul>
    <li>列表项 1</li> 
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

有序列表 ou>li

默认使使用阿拉伯数字标识每条数据,可以使用start属性设置起始的值,默认为1

快捷键: ol>li*3
<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

列表嵌套,在已有列表中嵌套添加另一个列表

<ol>
    <li>
        西游记
        <ul>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙和尚</li>
        </ul>
    </li>
</ol>

表格标签<table>

表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下:

<table></table>:创建表格

属性:

  • border:规定单元格边框

<caption>表名</caption>:表名

<tr></tr>:行标签,创建一行

<td></td>:列标签,创建一列

3行5列表格快捷键    table>tr*3>td*5
<!-- 创建表格标签,宽度200个像素,表框1,表格间距0 -->
<table width="200px" border="1" cellspacing="0">
  <caption>表名</caption>
<!-- 创建行标签 --> <tr> <!-- 行中创建单元格以显示数据 --> <td>姓名</td> <td>年龄</td> <td>班级</td> </tr> <tr> <td>张三</td> <td>20</td> <td>一(1)班</td> </tr> </table>

单元格合并

  用于调整表格结构,分为跨行合并 和 跨列合并合并之后需要删除被合并的单元格,保证表格结构完整。

单元格属性 作用 取值
colspan 合并单元格 无单位数值
rowspan 合并单元格 无单位数值
<table border="1">
    <tr>
        <th>姓名</th>
        <td>李小明</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>010-1234567</td>
    </tr>
    <tr>
        <td>13912321213</td>
    </tr>
</table> 

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>  <!--跨越两列-->
    </tr>
    <tr>
        <td>李小明</td>
        <td>010-1234567</td>
        <td>13912321213</td>
    </tr>
</table>

表单标签 <form> </form>

  表单用于收集数据并提交给服务器,由表单元素和表单控件组成。表单元素允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单标签 使用<form> </from>来设置

属性:

  • action:设置数据的提交地址
  • method:设置数据的提交方式,默认为get方式,可以设置为post
  • onsubmit:设置表单数据提交时的触发事件的执行函数(事件绑定中详细介绍)
<form action="" method="" onsubmit="">
    <!--此处为表单控件-->
</form>

输入元素 input

输入类型是由类型属性type定义。文本域的默认宽度是 20 个字符。

属性

  • type:设置控件类型,如果值为"password"则表示密码不可见,如果为“text”则为普通文本
    • text:普通文本
    • password:密码,不可见
    • radio:单选按钮
    • checkbox:复选按钮
    • submit / reset:提交和重置
    • button:按钮
    • color:选择颜色
    • data:选择日期
  • name:设置控件名称,最终与值一并发送给服务器
  • value:设置控件的值
  • placeholder:设置输入框中的提示文本
  • maxlength:设置输入框中可输入的最大字符数
  • checked:设置单选按钮或复选按钮的默认选中
  • selected:设置下拉菜单的默认选中
  • readonly:只读,就是不让输入

普通文本 type="text"

<label for="name">姓名:</label>
<input type="text" id="name" readonly placeholder="请输入用户名" name="name">

密码 type="password"

<div>
            <label for="pass">密码:</label>
            <input type="password" 
                   id="pass" 
                   placeholder="请输入密码"
                   name="pass">
        </div> 

单选按钮 type="radio"

<input type="radio"  name="sex" value="1"  checked readonly /><input type="radio" readonly name="sex" value="2" />

复选按钮 type="checkbox"

<input type="checkbox" name="like" />编程
<input type="checkbox" name="like2" checked />游戏
<input type="checkbox" name="like3" />阅读

提交和重置 type="submit \ reset"

<input type="submit" value="注册" />
<input type="reset" disabled value="重置" />

按钮 type="button"

<input type="button" value="Hello world!">

输入多行文本内容

<textarea name="demo" id="demo" cols="30" rows="10">
    默认文本
</textarea>

下拉列表

下拉列表select,id要对应label的值

<option>中如果定义了selected属性,则会默认先选中它。

<select name="xl" id="xl">
    <option value="1">大学</option>
    <option value="2">中学</option>
    <option value="3" selected>小学</option>
</select>

最后融会贯通的运用一下表单元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <div>
            <label for="name">姓名:</label>
            <!-- 占位符 -->
            <input type="text"
                   id="name"
                   readonly
                   placeholder="请输入用户名"
                   name="name">
        </div>
        <div>
            <label for="pass">密码:</label>
            <input type="password"
                   id="pass"
                   placeholder="请输入密码"
                   name="pass">
        </div>
        <div>
            <label for="xl">学历:</label>
            <!-- 下拉列表框元素 使用 option 设置列表项 value 是列表的值-->
            <select name="xl" id="xl">
                <option value="1">大学</option>
                <option value="2">中学</option>
                <option value="3">小学</option>
            </select>
        </div>
        <div>
            <label for="sex">性别:</label>
             <!-- 单选按钮元素 相互排斥时,将 name 属性值设置为同一个-->
             <input type="radio"
                    name="sex"
                    value="1"
                    checked
                    readonly
                    /><input type="radio" readonly name="sex" value="2" /></div>
        <div>
            <label for="like">爱好:</label>
            <input type="checkbox" name="like" />编程
            <input type="checkbox" name="like2" checked />游戏
            <input type="checkbox" name="like3" />阅读
        </div>
        <div>
            <label for="demo">简介:</label>
            <!-- 输入多行多列文本内容 -->
            <textarea name="demo"
                      id="demo"
                      cols="30"
                      rows="10">
            </textarea>
        </div>
        <div>
            <input type="submit" value="注册" />
            <input type="reset" disabled value="重置" />
        </div>
    </form>
</body>
</html>
View Code

HTML属性

  HTML可以设置属性,一般在开始标签中添加标签属性信息,属性总是以名称/值对的形式出现,比如:name="value"

由于HTML每个标签都包含很多属性,菜鸟教程总结了常用标元素的属性 HTML 标签参考手册

在此列出用的最多的几个属性:

 属性  描述
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式(style)
title 描述了元素的额外信息(作为工具条使用)

HTML全局属性

语义元素

  语义元素能够清楚的描述其意义给浏览器和开发者。

  许多现有网站都包含以下HTML代码: <div id="nav">,<div class="header">,或者 <div id="footer">,来指明导航链接,头部,以及尾部。

  HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

<header>元素:描述了文档的头部区域,在页面中可以使用多个<header>元素。

<nav>元素:定义页面导航链接

<article>元素:定义独立的内容,

<section>元素:定义文档中的节,比如章节、页眉、页脚或文档的其他部分。

<aside>元素:定义页面主区域之外的内容(比如侧边栏)

<footer>元素:描述了文档的底部区域

 

原文出处:https://www.cnblogs.com/LXP-Never/p/11229886.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部