前言:
HTML不是脚本语言,不能执行的。它全称叫“超文本标记语言”,需要浏览器来解析。HTML由一个又一个的标签组成(标签也被称呼为:元素)。
HTML包含了:head,body。(有且只有一个)。其中<head>中的<metal>是元信息。
HTML的注释是:<!-- 注释的内容 -->
最基本的一个HTML页面:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"><!--表示网页是英语。当第一次访问,浏览器会提示“是否翻译”--> <!-- 中文 : zh-cn;简体中文 : zh-hans --> <head> <meta charset="UTF-8"><!-- 编码格式。斜杠在H5中,不提倡写 --> <meta name="author" content="quanquan616"><!-- 斜杠在H5中,不提倡写 --> <meta name="keywords" content="quanquan616,张一贝"><!-- 关键字,对搜索引擎友好 --> <meta name="description" content="150 words"> <title>整个网页的标题</title> </head> <body> </body> </html>
在pycharm中,不要直接run。不然用的是pycharm自带的服务器,图片路径是不对的,会照成破图。
这么打开:(在pycharm代码界面右击,然后选红框框,会打开个新窗口,你会看到你的html文件)
一、HTML的常用标签
(一).标题标签<h1>~<h6>
(二).段落标签<p>
(三).列表标签。常用于配合<div>使用
(1).有序列表<ol><li></li></ol>
(2).无序列表<ul><li></li></ul>
(3).定义列表
<dl> <dt>列表项</dt> <dd>描述</dd> <dd>描述</dd> </dl>
(四).<div>标签。用于分化一个个的区域。网页布局就用它!
(五).图片标签<img src="" alt="" width="" title="">
(1).注意src中的路径写法,如果当前html文件没有与图片文件夹同级时要写"../images/1.jpg",(".."是回到上一级目录)
(2).当图片路径错误的时候,出现了破图,alt中的内容就会显示出来。
(3).width可以给定一个数值,可以写百分比。给定了一个数值,就会按同比例缩放。如果写百分比,图片会根据当前网页的宽度自适应。
(六).斜体/粗体标签
(1).斜体:<em>或<i>,推荐写前面一种。
(2).粗体:<strong>或<b>,推荐写前面一种。
(七).文字标签<span>
单纯的文字标签,需要配合CSS样式才能有效果。
(八).超链接标签<a href="" target=""></a>
<a href="" target="">必须要有文字,不然不会出来</a>
(1).href中可以写死链,不管怎么点都不会有反应。这么写:"javascript:void(0);",做特效时用得到。
(2).href可以做锚点:
<span id="to_top">这是顶部</span> <a href="#python">点击,到python</a><!-- 锚点通过id来锚 --> <p id="python">这里是python</p> <a href="#to_top">返回顶部</a><!-- 要与上面的id一一对应起来,不然没效果 -->
(3).target中常用的属性:"_blank"在新的页面打开,"_self"在本页打开,覆盖本页。
(九).块级元素和行内元素的区别(标签分为块级和行内)
(一)~(四)是块级标签。(四)~(九)是行内标签。文字都是行内元素。
(1).块级元素的前后会自动换行,行内元素不会。
(2).块级元素可以包含行内和块级,行内元素包含文本或其他行内元素,但不建议包含块级。
(3).块级元素可以给宽高度,行内元素不能。
(4).块级元素可以给上下外边距,行内元素不能。
二、特殊符号
特殊符号以与"&"开头,分号";"结束。
><!-- 大于号 --> <<!-- 小于号 --> =<!-- 等于号 --> &<!-- &符号 --> <!-- 空格 -->  <!-- 空白位 --> ©<!-- 版权符 -->
其中: 只是一个空格。 一个空白位,英文两个空格,中文四个空格。
三、表格
现在布局全都是div+css,表格对搜索引擎不友好,一般只用于后台展示数据。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table border="1" style="border-collapse: collapse;"> <caption>表格标题</caption> <thead> <tr> <th>name</th> <th>age</th> <th>gender</th> </tr> </thead> <tbody> <tr> <td>quanquan616</td> <td>29</td> <td rowspan="2">男</td><!-- rowspan合并行,上下合并。下边的td要对应去掉,不然会多出来 --> </tr> <tr> <td>大佬</td> <td>88</td> </tr> <tr> <td>小妹妹</td> <td colspan="2">不要问</td><!-- colspan合并列,左右合并 --> </tr> </tbody> </table>
四、表单
这个非常重要!前后端交互的方式之一:表单负责收集用户数据,发送给后端。没有表单把数据提交过去,后端接收不到任何东东。
表单的应用:常应用于登录、注册、搜索、文件上传。
看下面的案例,例1:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<form action="" method="get" name="self_introduce" id="" enctype="multipart/form-data"> <div> <ul> <p style="color: #900;"><strong>自我介绍</strong></p> <li> <label for="username">用户名:</label> <input type="text" name="username" id="username" value="张三" readonly> </li> <li> <label for="password">密 码:</label> <input type="password" name="password" id="password"> </li> <li> 性 别: <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>  <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>  <input type="radio" name="gender" value="secret" id="secret"><label for="secret">保密</label> </li> <li> 爱 好: <input type="checkbox" name="hobby" value="papapa" id="papapa"><label for="papapa">啪啪啪</label>  <input type="checkbox" name="hobby" value="racing" id="racing"><label for="racing">看书</label>  <input type="checkbox" name="hobby" value="games" id="games"><label for="games">电脑游戏</label> </li> <li> 地 址: <select name="address"> <option value="0">--请选择--</option> <option value="ningbo" selected>江苏</option> <option value="beijing">北京</option> <option value="qingdao">重庆</option> </select> </li> <li> <label for="introduce">个人简介:</label> <textarea name="introduce" id="introduce" cols="25" rows="10" style="vertical-align: top;">i love you</textarea> </li> <li> 上传头像: <input type="file"> </li> <li> <input type="submit" value="提交">  <input type="reset" value="重置"> </li> </ul> </div> </form>
(一).action:提交的地址。没有写,默认提交到当前页面。
(二).method:提交方式。(获取用get,提交用post)
(1).get:默认,以明文方式的方式。地址栏后面后拼接表单中所有的值。
(2).post:打包提交。
(三).name必须要有,不然后端怎么判断是哪个表单提交过来的 — —!
(四).entype:设置编码格式
如果有文件上传,就必须写:enctype="multipart/form-data"
(五).标签中的name属性
每个标签,name必须指定!它是后端接收的唯一标识,是后端区分值的唯一方式,一一对应,通过name得到value。
例外:比如单选框、复选框,它们有同一个name,那么就通过指定后面的value区分具体的数据。
(六).一些小技巧
(1).文本框中:value="xxx"可以指定默认的值。placeholder="xxx"可以设置提示信息,提高用户体验度,激活这些内容会消失。readonly只读,H5就这么写,不需要再"readonly="readonly""傻不拉唧的了。
(2).单选、复选:checked选中,H5就这么写,可以默认勾上、选中。disable禁用,不能选。
(3).下拉列表框:<option value="xxx" selected>默认就选中了这个下拉列表。