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

上述两种文档的区别:

    1、文档声明和编码声明

    2、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可部分遵守，也可全部遵守，看开发要求。

    1、所有的标签必须小写

    2、所有的属性必须用双引号括起来

    3、所有标签必须闭合

    4、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常用标签

    1、table标签：声明一个表格

    2、tr标签：定义表格中的一行

    3、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来做整体页面的布局，布局的技巧归纳为如下几点：

    1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

    2、单元格里面嵌套表格

    3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

    4、通过属性或者css样式设置单元格中元素的样式

传统布局目前应用：

    1、快速制作用于演示的html页面

    2、商业推广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

Python全栈工程师之html学习笔记的更多相关文章

  1. Python全栈工程师系列学习之学习记录

    @ 目录 前言 Day 01 一.python的历史和种类 二.安装python解释器以及配置环境变量 三.变量.常量和注释 Day 02 Day 03 Day 04 Day 05 Day 06 一. ...

  2. python全栈开发中级班全程笔记（第二模块、第三章）（员工信息增删改查作业讲解）

    python全栈开发中级班全程笔记 第三章:员工信息增删改查作业代码 作业要求: 员工增删改查表用代码实现一个简单的员工信息增删改查表需求: 1.支持模糊查询,(1.find name ,age fo ...

  3. 老男孩Python全栈第2期+课件笔记【高清完整92天整套视频教程】

    点击了解更多Python课程>>> 老男孩Python全栈第2期+课件笔记[高清完整92天整套视频教程] 课程目录 ├─day01-python 全栈开发-基础篇 │ 01 pyth ...

  4. C#.Net全栈工程师之路-学习路径

    C#.Net全栈工程师之路-学习路径 按架构分: C/S架构: B/S架构: Mobile移动开发: 按技术点分: C#编程基础以及OOP面向对象编程: 数据库基础以及高级应用(MYSQL+MSSQL ...

  5. python全栈开发中级班全程笔记（第二模块、第四章）（常用模块导入）

    python全栈开发笔记第二模块 第四章 :常用模块(第二部分)     一.os 模块的 详解 1.os.getcwd()    :得到当前工作目录,即当前python解释器所在目录路径 impor ...

  6. python全栈开发中级班全程笔记（第二模块、第四章（三、re 正则表达式））

    python全栈开发笔记第二模块   第四章 :常用模块(第三部分) 一.正则表达式的作用与方法 正则表达式是什么呢?一个问题带来正则表达式的重要性和作用      有一个需求 : 从文件中读取所有联 ...

  7. Python全栈工程师（装饰器、模块）

    ParisGabriel                每天坚持手写  一天一篇  决定坚持几年 全栈工程师     Python人工智能从入门到精通 装饰器 decorators(专业提高篇) 装饰 ...

  8. Python全栈工程师（递归函数、闭包）

    ParisGabriel            每天坚持手写  一天一篇  决定坚持几年 全栈工程师     Python人工智能从入门到精通 函数式编程: 是指用一系列函数解决问题 每一个函数完成细 ...

  9. 【目录】python全栈工程师

    第一阶段:Python 语言核心编程1. Python核心   -- 2048 游戏核心算法2. 面向对象   -- 天龙八部游戏技能系统3. Python高级   -- 集成操作框架项目:2048游 ...

随机推荐

  1. HDU-1556：Color the ball（前缀和）

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  2. Technocup 2017 - Elimination Round 1 (Unofficially Open for Everyone, Rated for Div. 2) B

    Vasily exited from a store and now he wants to recheck the total price of all purchases in his bill. ...

  3. JetSpeed2因dom4j包冲突导致PSML页面文件数据丢失

    使用JetSpeed2进行二次开发时突然出现在保存Portlet配置信息时出现PSML页面文件数据丢失的情况,几经测试,最终发现是因为Portlet中的dom4j.jar与jetspeed应用中的do ...

  4. Jackson 动态过滤属性，编程式过滤对象中的属性

    场景:有时候我们做系统的时候,比如两个请求,返回同一个对象,但是需要的返回字段并不相同. 常见与写前端接口的时候,尤其是手机端,一般需要什么数据就返回什么样的数据.此时对于返回同一个对象我们就要动态过 ...

  5. INSERT ... ON DUPLICATE KEY UPDATE产生death lock死锁原理

    前言 编辑 我们在实际业务场景中,经常会有一个这样的需求,插入某条记录,如果已经存在了则更新它如果更新日期或者某些列上的累加操作等,我们肯定会想到使用INSERT ... ON DUPLICATE K ...

  6. babel-loader7和babel8版本的问题

    根据官网https://www.npmjs.com/package/babel-loader要对应版本 一.babel7.X版本 1.要安装的包  第1套包:npm i babel-core babe ...

  7. C#调用C库的注意事项

    作者:朱金灿 来源:http://blog.csdn.net/clever101 注意事项一: 从C#的exe进入C库的源码进行调试,需要先"启用非托管代码调试",如下图: 注意事 ...

  8. C语言中的fprintf函数详解

    fprintf 功能 传送格式化输出到一个文件中 用法 #include   stdio.h int fprintf( FILE *stream, const char *format,...); f ...

  9. Easyui combobox如何默认选中第一项？？？

    以下代码可以实现combobox默认选中第一项,在实际开发中我们可能会用到! // 处理combobox默认选中的问题 <input id="user_type" class ...

  10. Azure 项目构建 – 部署 Drupal 网站

    通过完整流程详细介绍了如何通过 Azure Web 应用. MySQL DB on Azure 等服务在 Azure 平台上快速搭建 Drupal 服务器,并将其连接到 MySQL 数据库. 此系列的 ...