HTML

2019-05-17 本文已影响0人昆仑草莽

html+css+javascript 称作前端三剑客，html主要做前端的骨架，css做前端的效果，js做前端的性能，打个比方：就是html就好比是毛坯房，css就好比是进行装修，js就好比是在装修好的房间内加入智能电器，家具等。这一节来简单的学习html。

HTML及标签简介

HTML是超文本标记语言，HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签。此处使用编辑器： Pycharm 以及浏览器：Chrome、Firefox

HTML文件的基本内容

打开网页点击有键，查看检查，或F12 就可以看见网页的代码，也就是HTML文件。不同的浏览器查看方式稍有不同，请自行查阅。

HTML的基本结构

<?xml version="1.0" encoding="UTF-8"?> <!--html版本以及编码格式-->
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--文档类型-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!--html主体-->
<head><!--html头文件，所有的效果，调用，均写在这里-->
    <title>Title</title><!-- html网页标题 -->
</head>
<body><!-- html身体，所有的页面显示都写在这里 -->

</body>
</html>

HTML标签

1、由尖括号包裹单词构成，eg：<html>,所以标签不可能以数字开头。
2、标签不区分大小写，推荐小写。
3、标签可以嵌套，但不能交叉嵌套

错误示例：<a><b></a></b>
正确示例：<a><b></b></a>

标签的使用样式及属性

标签使用样式：
1、开始标签<a >标签体</a>结束标签
2、自闭合标签，eg: <textarea>,<span><input>,<img>
标签属性：
a、通常为键值对形式出现，eg：color=“red” id = ‘eat’
b、属性只能出现在开始标签和自闭合标签内
c、属性名字全部小写，属性值必须用单引或者双引包裹
d、如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）

html文件各部分标签详解-- <body>

块级标签和内联标签：

块级标签和内联标签：         
1 块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>          
2 内联标签：<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>            
3 块级元素的特点：                
总在新行上开始               
高度，行高以及外边距和内边距都可控制                
宽度缺省，则是它容器的100%                
它可以容纳内联元素和其他块元素            
4 inline元素特点：               
和其他元素在一行上                
高，行高以及外边距和内边距不可改变                
宽度就是其文字或图片宽度，不可改变                
内联元素只能容纳文本或者其他内联元素
  
以下内容先做了解，后续css样式再做补充           
行内元素注意：                
设置宽度width无效                
设置高度height无                
设置margin只有左右margin有效，上下无效                
设置padding只有左右padding有效，上下则无效，
注意元素范围是增大了，但是对元素周围的内容是没影响的。

标题标签（header）

一般用在文章的标题（h1-h6）

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>
<h1>第一段落</h1>
<h2>第二段落</h2>
<h3>第三段落</h3>
<h4>第四段落</h4>
<h5>第五段落</h5>
<h6>第六段落</h6>
</body>
</html>

显示：

段落标签（paragraph）

会把html文档分成若干段落，属于块级标签，自己独占一行。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>
<p>
    将进酒
唐代：李白

君不见，黄河之水天上来，奔流到海不复回。
君不见，高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
</p>
</body>
</html>

显示：

在显示到时候，文本会根据网页的宽度自动进行换行，

列表标签

列表标签分为有序列表，无序列表，定义列表

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>
无序列表
<ul>
    <li>apple</li>
    <li>banana</li>
    <li>pear</li>
</ul>
有序列表
<ol>
    <li>dog</li>
    <li>monkey</li>
    <li>house</li>
</ol>
定义列表
<dl>
    <dt>时间
        <dd>周一</dd>
        <dd>周二</dd>
        <dd>周三</dd>
    </dt>
    <dt>课程
        <dd>python</dd>
        <dd>java</dd>
        <dd>c++</dd>
    </dt>
</dl>
</body>

</html>

显示：

列表快捷键：ul>li3 点击tab键，快速写出表格。ol>li3,或者dl>dt2>dd3 ,然后点击tab键。

dl>dt*2>dd*3 <!-- 点击tab键，生成如下表格 -->
<dl>
    <dt>
        <dd></dd>
        <dd></dd>
        <dd></dd>
    </dt>
    <dt>
        <dd></dd>
        <dd></dd>
        <dd></dd>
    </dt>
</dl>

图片标签

用于向页面插入图片，是内联标签。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>
图片链接正确：<br/>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
图片链接不正确（无图片链接）：<br/>
<img src="无.jpg" alt="图片丢了"/><br/>
</body>

</html>

显示：

图片标签格式：

<img src="图片地址" alt="图片加载失败后替换的文本" title="鼠标滑过图片时的提示文本" > 图片的格式可以为GIF，PNG，JPEG

超链接标签

超链接标签<a>:
<a href=“目标网址” title=“鼠标滑过显示的文本” target=“_blank”>链接显示的文本</a>
实现网页跳转和本页内跳转（要注意目标网址的区别）
target的参数如果是self 则表示就在本页面进行条状，blank表示新开一个页面跳转

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>
<a href="https://baidu.com/" target="_blank" title="网页跳转">百度一下</a>
<p id="test">第一张图----跳转到此处</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第二张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第三张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第四张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<p>第五张图</p>
<img src="l.jpg" alt="风景"/><br/><br/><br/>
<a href="#test" title="本页面内跳转">页面内跳转</a>
</body>
</html>

当点击百度一下时，网页会自动跳转到百度页面。点击--页面内跳转--时，页面会跳转到--第一张图----跳转到此处--处。由于页面过大，就不在这里展示了。请自行测试。
行内元素和块级元素的转换：
行内元素转块级元素：display:block；
块级元素转行内元素：display:inline;

特俗符号

特殊符号就是网页上一些比较特殊的符号，因为有时候我们需要特殊符号，比如，我要把html代码显示在页面上，特殊符号以 & 开头，分号结尾。

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>
    ww<a
        <!--以上只会在网页上显示ww，他会将<a视为一个标签，若要显示，就要使用特俗符号 -->
    &lt;&gt;&quot;&nbsp;&emsp;
    &copy;&reg;&amp;
</body>
</html>

上面这个代码会报错，无法显示，将<a去掉或补齐方可显示，去除<a后的显示为：

特俗符号可以在使用时去查询即可。

表格

表格其实就是大家平时看到的二维表，比如Excel表格之类，表格布局火于90年代，如今一般用于后台展示数据，现今已经不大使用。表格分为表头，表身和表脚。
表格整体结构：

标签名	描述
table	表格标签
thead	表头标签
tbady	表身标签
tfoot	表脚标签
caption	表格标题
rowspan	合并行
colspan	合并列

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <style>
        table tr td {
            border :1px solid blue;
            width: 50px;
        }
    </style>
</head>
<body>
    <table style="border-collapse: collapse">
        <caption>员工信息表</caption>
        <thead>
            <th><td>name</td></th>
            <th><td>age</td></th>
            <th><td>sex</td></th>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>18</td>
                <td>男</td></tr>
            <tr>
                <td>小红</td>
                <td>16</td>
                <td>女</td></tr>
            <tr>
                <td>小路</td>
                <td>19</td>
                <td>男</td></tr>
        </tbody>
    </table>

<!--<table></table>:加上此标签，表格的内容会在全部下载后才会显示。-->
<!--<table></table>:在没有加CSS样式时，浏览器里是没有表格框的-->
<!--<th></th>:表头默认粗体，剧中-->
</body>
</html>

显示：

表单

表单是搜集用户数据信息的各种表单元素的集合区域，他用于收取用户数据并向后台发送，前后交互的方式之一，表单常应用于登录注册，搜索，文件上传等。

参数	描述
action	提交时候的地址默认使用当前页面
method	提交时候的方法有get 和 post 两种方法，默认使用 get
entype	设置编码格式有三种：默认：application/x-www-form-urlencoded 上传文件：multipart/form-data 不建议使用：text/plain

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>
    <form action="" name="登陆表单" method="get" style="text-align: left">
        用户名：<input type="text" name="我的提交" /><br/><br/>
        密&emsp;码：<input type="password" name="密码" /><br/><br/>
        性&emsp;别：男<input type="radio" name="单选" />
        女<input type="radio" name="单选" />
        保密<input type="radio" name="单选" /><br/><br/>
        爱&emsp;好：唱歌<input type="checkbox" name="多选" />
        跳舞<input type="checkbox" name="多选"/>
        画画<input type="checkbox" name="多选"/><br/><br/>
        上传头像：<input type="file" name="打开文件"/><br/><br/>
        地&emsp;址：<select name="地址选择" id=""  >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option></select><br/>
        <br/>
        个人简介：<textarea name="文本输入" id="" cols="30" rows="10"></textarea><br/>
        <br/>
        <input type="reset" value="重置"/>&emsp;
        <input type="submit" value="提交" />
    </form>
</body>
</html>

显示：

表单中常用的标签：

标签	描述
input	表单中使用频率最高的标签，没有之一
textarea	文本域，一般用于多行文本
select	下拉框，一般用于选项

input标签：

name属性：表单提交项的键，与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用

value属性:表单提交项的值

input标签中不同type，value值的不同
type="button"/"reset"/"submit"--定义按钮上显示文本
type="text"/"password"/"hidden"--定义输入字段初始值
type="checkbox"/"radio"/"image"--定义与输入相关联的值

input常用的type属性值：

参数	描述
text	文本框
password	密码框
radio	单选框
checkbox	复选框
file	文件选择
hidden	隐藏域
submit	提交
reset	重置

input标签其他属性：

参数	描述
placeholder	placeholder 属性规定可描述输入字段预期值的简短的提示信息
name	表单与后台交互时最重要的一个属性，要求input标签都带上
readonly	只读
disabled	禁用
value	input的值单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Title</title> 
</head>
<body>

<form action="demo-form.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。</p>

</body>
</html>

显示：

select下拉框：

参数	描述
option	下拉框的基本标签，有多少个option 就有多少个下拉选项
selected	表示选中某个下拉选项
size	表示下拉框，显示多少个，默认显示一个
name	下拉框名字，下拉框向后台提交数据的时候，所传的名字