Python全栈工程师之html学习笔记

时间 2019-12-14
原文原文链接
https://www.bilibili.com/video/av15241731
笔记来源:黑马程序员
HTML(Hyper Text Markup Language):超文本标签语言
HTML标签关系:
    1.嵌套关系
    2.并列关系

Sublime快捷键:html:5+Tab 或者!+Tab能够生成以下模板:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
===============================================================================================================
<!DOCTYPE html>这句是告诉咱们使用哪一个html版本.
<!DOCTYPE>标签位于文档的最前面,用于向浏览器说明当前文档使用哪一种HTML或XHTML标准规范.必须在开头处使用<!DOCTYPE>
该标签为全部的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析.
注意:一些老网站可能用的仍是老版本的文档类型好比XHTML之类,但咱们学习的是HTML5,并且HTML5的文档类型兼容性很好(向下兼容原则),
因此你们放心的使用HTML5的文档类型就行了.
xhtml 1.0 是html5以前的一个经常使用的版本，目前许多网站仍然使用此版本.此版本文档用sublime text建立方法： html:xt + tab
pc端可使用xhtml 1.0，也可使用html5，html5是向下兼容的
此版本文档用sublime text建立方法： html:5 + tab 或者 ! + tab
上述两种文档的区别:
    一、文档声明和编码声明
    二、html5新增了标签元素以及元素属性

“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它通常做为分析统计用。
“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，
外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。

<meta charset="UTF-8">用于定义字符集.
UTF-8 是目前最经常使用的字符集编码方式,经常使用的字符集编码方式还有gbk和gb2312
gb2312:简单中文,包括6763个汉字
BIG5:繁体中文,港澳台使用
GBK:包含所有中文字符集,是GB2312的扩展,加入对繁体的支持,兼容GB2312
UTF-8:包含全世界全部国家须要用到的字符,万国码的一种.

html文档规范
    xhtml制定了文档的编写规范，html5可部分遵照，也可所有遵照，看开发要求。
    一、全部的标签必须小写
    二、全部的属性必须用双引号括起来
    三、全部标签必须闭合
    四、img必需要加alt属性(对图片的描述)

HTML标签:
1.排版标签:
排版标签主要和CSS搭配使用,显示网页结构的标签,是网页布局最经常使用的标签.
2.标题标签:
为了使网页更具备语义化,咱们常常会在页面中用到标题标签,HTML提供了6个等级的标题标签,即:h1-h6.
h1标签由于重要,要尽可能少用.
3.段落标签:<p>文本内容</p>,单词缩写:paragraph
段落标签是HTML文档中最多见的标签,默认状况下,文本在一个段落中会根据浏览器窗口的大小自动换行.
4.水平线标签<hr />,单词缩写horizontal,这是一个单标签.
用于在网页中将段落与段落隔开,使文档结构清晰.
5.换行标签<br />,单词缩写:break
在HTML中,一个锻落中的文字会从左到右依次排列,直到浏览器窗口的右端,而后自动换行.若是但愿某段文字强制换行,就须要使用该标签.
6.div span标签
div,span是没有语义的,是咱们网页布局主要的2个盒子.
div就是division的缩写,分割,分区的意思,实际上是不少div来组合网页.
span,跨度,跨距,范围
语法格式:<div>这是头部</div><span>今日价格</span>
7.文本格式化标签
在网页中,有时须要为文字设置粗体,斜体或下划线效果,这里就须要用到HTML中的文本格式化标记,使文字以特殊的方式显示.
<em></em>:表示语气中的强调词
<b></b>,<strong></strong>:文字以粗体方式显示(XHTML推荐使用strong)
<i></i>和<em></em>:文字以斜体方式显示(XHTML推荐使用em)
<s></s>和<del></del>:文字以加删除线方式显示(XHTML推荐使用del)
<u></u>和<ins></ins>:文字以加下划线方式显示(XHTML推荐使用u)
<b>,<s>,<u>只使用,没有强调的意思
<strong>,<em>,<del>,<ins>语义更增强烈.

标签属性:
HTML属性基本语法格式以下:
<标签名 属性1="属性值1" 属性2="属性值2"...>内容</标签名>
在上面的语法中:
    1.标签能够拥有多个属性,必须写在开始标签中,位于标签名后面.
    2.属性之间不分前后顺序,标签名与属性,属性与属性之间均以空格分开.
    3.任何标签的属性都有默认值,省略该属性则取默认值.

图像标签img(重点)
单词缩写:image
HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签.其基本语法格式以下:
该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性.
<img src="图像url" />
<img />标签的属性
scr-->url-->图像的路径
alt-->文本-->图像不能显示时的替换文本
title-->文本-->鼠标悬念时显示的内容
width-->像素(XHTML不支持%页面百分比)-->设置图像的宽度
height-->像素(XHTML不支持%页面百分比)-->设置图像的高度
    图片会根据宽或高等比缩放,要保持图像原比例只需设置一个宽属性或一个高属性.
border-->数字-->设置图像边框的宽度

连接标签(重点)
单词缩写:anchor,锚
在HTML中建立超连接很是简单,只须要用标签环绕须要被连接的对象便可,语法以下:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href,用于指定连接目标的Url,当为标签应用href属性时,它就具备了超连接的功能.href是 Hypertext Reference的缩写,意思是超文本引用
其中的target属性,用于指定连接页面的打开方式,其取值有_self和_blank两种,其中self为默认值,blank为在新窗口中打开方式.
注意:
1.外部连接须要添加 http://www.baidu.com
2.内部连接 直接连接内部页面名称便可,好比 <a herf="index.html">页面</a>
3.若是当时没有肯定连接目标是,一般将连接标签的href属性值定义为"#",表示连接暂时为一个空连接.
4.不只能够建立文本超连接,在网页中各类网页元素,如图像,表格,音频,视频均可以添加超连接.

锚点定位(难点)
经过建立锚点连接,用户可以快速定位到目标内容
建立锚点连接为分两步:
1.使用<a href="#id名">连接文本</a>来建立连接文本
2.使用相应的id名标注跳转目标的位置

base标签
base标签是个单标签,能够设置总体连接的打开状态.
示例:<base target="_blank" />

特殊字符标签
" "-->空格-->&nbsp;
"<"-->小于号-->&lt;
">"-->大于号-->&gt;
"&"-->和号-->&amp;
"￥"-->人民币-->&yen;
"©"-->版权-->&copy;
"®"-->注册商标-->&reg;
"℃"-->摄氏度-->&deg;
"+-"-->正负号-->&plusms;
"*"-->乘号-->&times;
"/"-->除号-->&divide;
"²"-->平方-->&sup2;
"³"-->立方-->&sup3;

注释标签:
<!-- 注释语句 -->
{# 注释语句 #}

路径(重点)
相对路径:
    1.图像文件和HTML文件位于同一文件夹,只输入图像文件的名称便可,如<img src="logo.gif" />
    2.图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名,之间用"/"隔开,如<img src="img/img01/logo.gif" />
    3.图像文件位于HTML文件的上一级文件夹,在文件名以前输入"../",若是是上两级,输入"../../",以此类推,如<<img src="../logo.gif" />
绝对路径(尽可能不要用,移值性差)
文件绝对路径示例:C:\Users\allen\Desktop\logo.gif
网页绝对路径:http://www.baidu.com

列表
无序列表ul(重点),格式以下:
ul里只能嵌套li标签,直接在ul标签中输入其余标签或者文字的作法是不被容许的.
li标签至关于一个容器,能够容纳全部元素
无序列表会带有本身样式的属性,要改变其默认属性能够经过css进行.
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

有序列表ol(重点),格式以下:
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
ol标签与ul标签特性基本至关.但尽可能多用ul少用ol.

自定义列表(理解)
定义列表一般用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号,基本语法以下:
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词2解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>

表格table(会使用),使用例子:http://finance.sina.com.cn/stock/ 中的板块行情,示例以下:
<table>
    <caption>table title and/or explanatory text</caption>
    <thead>
        <tr>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>
table经常使用标签
    一、table标签：声明一个表格
    二、tr标签：定义表格中的一行
    三、td和th标签：定义一行中的一个单元格，td表明普通单元格，th表示表头单元格
注:tr标签里面只能放td标签,td标签至关于一个容器,能够任何标签.
表格属性:
border-->设置表格的边框(默认border="0"无边框)-->像素值
cellspacing-->设置单元格与单元格边框之间的空白间距-->像素值,默认为2个像素
cellpadding-->设置单元格内容与单元格边框之间的空白间距-->像素值,默认为1个像素
width-->宽度
height-->高度
align-->设置表格在网页中的水平对齐方式-->left,center,right
valign 设置单元格中内容的垂直对齐方式-->top,middle,bottom
colspan 设置单元格水平合并
rowspan 设置单元格垂直合并

表头标签
表头通常位于表格的第一行或第一列,其文本加粗居中.设置表头只需用表头标签<th></th>替代相应的单元格标签<td></td>便可.
表格标题:caption
caption标签必须紧随table标签以后,只能对每一个表格定义一个标题.一般这个标题会被居中于表格之上.
合并单元格
跨行合并:rowspan,跨列合并:colspan
合并单元格的思想:
将多个内容合并的时候,就会有多余的东西,把它删除.
合并的顺序:先上,先左

传统布局：
传统的布局方式就是使用table来作总体页面的布局，布局的技巧概括为以下几点：
    一、定义表格宽高，将border、cellpadding、cellspacing所有设置为0
    二、单元格里面嵌套表格
    三、单元格中的元素和嵌套的表格用align和valign设置对齐方式
    四、经过属性或者css样式设置单元格中元素的样式

传统布局目前应用：
    一、快速制做用于演示的html页面
    二、商业推广EDM制做(广告邮件)

表格经常使用样式属性
border-collapse:collapse 设置边框合并，制做一像素宽的边线的表格

总结表格:
1.表格提供了HTML中定义表格式数据的方法.
2.表格中由行中的单元格组成.
3.表格中没有列元素,列的个数取决于行的单元格个数.
4.表格外观最好经过CSS设定.

表单控件:
包含了具体的表单功能项,如单行文本输入框,密码输入框,复选框,提交按钮,重置按钮等.
提示信息:
一个表单中一般还须要包含一些说明性的文字,提示用户进行填写操做.
表单域:
至关于一个容器,用来容纳全部的表单控牛和提示信息,能够经过他定义处理表单数据所用程序的Url地址,以及数据提交到服务器的方法.
若是不定义表单域,表单中的数据就没法传送到后台服务器.
input控件(重点)
在上面的语法中,<input />标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不一样控件类型.除了type属性以外,
input标签还能够定义不少其余的属性,其经常使用属性以下:
type-->text-->单行文本输入框
type-->password-->密码输入框
type-->radio-->单选按钮
type-->checkbox-->复选框
type-->button-->普通按钮
type-->submit-->提交按键
type-->reset-->重置按键
type-->image-->图像提交按键
type-->file-->文件域
name-->由用户定义-->控件名称
value-->由用户定义-->input控件中的默认文本值
size-->正整数-->input控件在页面中显示的宽度
checked-->checked-->定义选择控件默认被选中的项
maxlength-->正整数-->控件容许输入的最多字符数,可用于限制帐号长度和密码长度.
其中图像按钮为:<<input type="image" src="im.jpg" />

label标签(理解)
label标签为input元素定义标注(标签).
做用:用于绑定一个表单元素,当点击label标签的时候,被的绑定的表单元素就会得到输入焦点.
1.直接用label标签进行包裹:
<label><input type="text" name="hobby" value="01"></label>
2.for属性规定label与哪一个表单元素绑定:
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

文本域标签:格式以下:
<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

下拉菜单:
使用select控件定义下拉菜单的基本语法格式以下:
<select name="">
    <option value="">选项1</option>
    <option value="">选项2</option>
    <option value="">选项3</option>
    ...
</select>
select标签中至少应当包含一个option标签
在option中定义selected="selected"时,当前项即为默认选中项.

表单域
在HTML中,form标签被用于定义表单域,即建立一个表单,以实现用户信息的收集与传递.form中全部内容都会被提交至服务器.
建立表单的基本语法格式以下:
<form action="url地址" method="提交方式" name="表单名字" accept-charset="utf-8">
    各类表单控件
</form>
1.action:在表单收集到信息后,须要将信息传递给服务器进行处理.action属性用于指定接收并处理表单数据的服务器程序的Url地址.

文档类设定:
document:
HTML:sublime 输入 html:4s
XHTML:sublime 输入 html:xt
HTML5 sublime 输入 <!DOCTYPE html> 或!+Tab

字符设定:
<meta http-equiv="charset" content="utf-8">  HTML与XHTML中建议这样去写
<meta charset="utf-8">  HTML5的标签中建议这样去写

经常使用新标签:
w3c 手册中文官网:http://w3school.com.cn/
header:定义文档的页眉.
nav:定义导航连接的部分.
footer:定义文档或节的页脚
article:标签规定独立的自包含内容
section:定义文档中的节(section,区段)
aside:定义所外内容以外的内容
datalist:标签订义选项列表,请与input元素配合使用该元素,datalist示例以下:
<input type="text" value="输入明星" list="star">
<datalist id="star">
    <option>张学友</option>
    <option>刘德华</option>
    <option>周杰伦</option>
    <option>谢霆锋</option>
</datalist>
fieldset:元素将表单内的相关元素分组,打包,和legend搭配使用.fieldset示例:
<fieldset>
    <legend>用户登陆</legend>
    用户名:<input type="text"><br /><br />
    密　码:<input type="password">
</fieldset>

经常使用新属性:
placeholder--><input type="text" placeholder="请输入用户名">    占位符,显示本身设置的提示信息
autofocus--><input type="text" autofocus="">    规定当页面加载时input元素应该自动得到焦点
multiple--><input type="file" multiple>        多文件上传
autocomplete--><input type="text" autocomplete="off">    规定表单是否应当启用自动完成(补全)功能,须要与submit结合,且这个表单须要有name属性才有效
required--><input type="text" required="">    表示必填项
accesskey--><input type="text" accesskey="s">    规定激活(使元素得到焦点)元素的快捷键
示例:昵称:<input type="text" required accesskey="s">,意味着无论光标在哪里,只要按住alt+s就能够把光标定位到该元素

新增的input type属性值:
email--><input type="email">    输入邮箱格式
tel--><input type="tel">    输入手机号码格式
url--><input type="url">    输入url格式
number--><input type="number">    输入数字格式
search--><input type="search">    搜索框
range--><input type="range">    自由拖动滑块
time--><input type="time">        小时分钟
date--><input type="date">        年月日
datetime--><input type="datetime">    时间
month--><input type="month">    年月
week--><input type="week">        星期 年
color--><input type="color" />    颜色
示例:
<form action="" accept-charset="utf-8"> <!-- 下列标签必须结合form使用 -->
    邮箱:<input type="email" />    <!-- 只能是邮箱格式 -->
    手机:<input type="tel" />    <!-- 在PC端上不明显 -->
    数字:<input type="number" /> <!-- 不能输入数字外的字符 -->
    url:<input type="url" />    <!-- 必须输入网址 -->
    搜索:<input type="search" />
    区域:<input type="range" />
    时间:<input type="time" />
    年月日:<input type="date" />
    年月:<input type="month" />
    星期:<input type="week" />
    datetime:<input type="datetime" />
    颜色:<input type="color" />
    <input type="submit" />
</form>

多媒体标签:
embed:标签订义嵌入的内容
audio:播放音频
video:播放视频
多媒体embed(会使用)
embed能够用来插入各类多媒体,格式能够是Midl,Wav,AIFF,AU,MP3等等,url为音频或视频文件及其路径,
能够是相对路径或绝对路径.
<embed src="视频地址" allowfullScreen="true" quality="heigh" width="480" height="400"
align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

多媒体audio
HTML5经过<audio>标签来解决音频播放的问题,示例以下:
<audio src="./music/See You Again.mp3"></audio>
而且能够经过附加属性能够更加友好地控制音频的播放:
autoplay:自动播放
controls:是否显示不默认播放控件
loop:循环播放
示例:
咱们的视频支持 ogg, mp4, webM三种视频格式
<video autoplay controls>
    <source src="/media/video.oga">
    <source src="/media/video.m4v">
    <object type="video/ogg" data="/media/video.oga" width="320" height="240">
    <param name="src" value="/media/video.oga">
    <param name="autoplay" value="false">
    <param name="autoStart" value="0">
    <p><a href="/media/video.oga">Download this video file.</a></p>
    </object>
</video>

html内嵌框架
<iframe>标签会建立包含另一个html文件的内联框架（即行内框架），src属性来定义另外一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码以下：
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

内嵌框架与a标签配合使用
a标签的target属性能够将连接到的页面直接显示在当前页面的iframe中，代码以下：
    <a href="01.html" target="myframe">页面一</a>
    <a href="02.html" target="myframe">页面二</a>
    <a href="03.html" target="myframe">页面三</a>
    <iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>


单标签:input,br,hr,img,base