黑马程序员web前端教程：HTML的标签笔记(上)
目录
目录 (1)
1.1 HTML文件的后缀 (2)
1.2 快速生成HTML页面结构 (2)
1.3 Doctype标签 (3)
1.4 HTML标签 (4)
1.5 Head标签 (4)
1.6 Link标签的常见用法 (5)
传智播客前端与移动开发学院前端开发工程师、移动HTML5开发工程师、全栈开发培训 1.1 HTML文件的后缀
HTML文档的后缀名：.html .htm
在早期的dos 8位机的时代，电脑只识别3个字母的后缀名文件。
所以
HTML文件的后缀为：.htm
现在所有的电脑都支持多字符的文件后缀名，所以现在大家都在使用.html 后缀名了，当然用.htm == .html进行命名html文档的后缀名都是一样的效果。
1.2 快速生成HTML页面结构
Html:5 + tab键快速生成html5 的文档结构。
传智播客前端与移动开发学院第2页
1.3 Doctype标签
<!DOCTYPE html><!-- 文档的声明：当前文件是一个html文档，遵循的标准是html5的标准-->
Html:4s + tab
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Html:4t + tab
Html:xt + tab : xhml过渡期的标准
目前所有的新的网站都是用html5的标准走。
传智播客前端与移动开发学院前端开发工程师、移动HTML5开发工程师、全栈开发培训
文档声明标签一定要有，不能省略，后面学了css之后，文档声明标签会严重影响页面的展示效果。
1.4 HTML标签
HTML标签代表整个文档结构。
HTML标签只嵌套head标签和body标签。
1.5 Head标签
Head标签中设置都是用于给浏览器使用的一些配置和设置。
比如meta标签告诉浏览器当前文档的编码格式。
传智播客前端与移动开发学院第4页
1.6 Link标签的常见用法
●引入DNS预先解析
dns预解析(了解)
<link rel="dns-prefetch" href="">
●引入网站icon图标：
<link rel="shortcut icon" href="/favicon.ico" />
●引入css样式，【后面讲】
<link rel="stylesheet" href="css/bg.css">。
详细html标签笔记,正在学习html的朋友可以拿去作参考
一、html的头部<head></head>标记1、元信息标记meta设置页面关键字；<meta name="”keywords" content="网页的关键字">，Keywords为关键字设置网页描述；<meta name="description" content="网页的描述">，Description为网页描述定义编辑工具；<meta name="generator" content="编辑软件的名称">，generator为编辑工具设置作者的信息；<meta name="author" content="作者的姓名">Author为作者设置网页文字及语言；<meta http-equiv="content-type" content="text/html; charset=字符集类型">，http-equiv；用于传送http通信协议的标头，charset；用于设置网页的内码语系，常用类型为utf-8。
设置网页的定时跳转；<meta http-equiv="refresh" content="跳转的时间; url=要去的网址">，refresh表示网页的刷新。
<meta http-equiv="Page-Enter"content="revealTrans(Transition=2,Duration=1.000)">表示进入网页时的特效<meta http-equiv="Page-Exit"content="revealTrans(Transition=22,Duration=1.000)">表示退出网页时的特效两种特效均改变数值即可<link rel="shortcut icon" type="image/x-icon"href="/images/favicon.ico" media="screen" /> ico 格式的小图标<meta http-equiv="expires" content="0">禁止浏览器使用缓存页面<meta name="robots" content="index">允许搜索引型爬行首页二、主体标记<body></body>网页背景颜色bgcolor；<body bgcolor=”背景颜色”>，网页背景图片background；<body background=”图片的地址”>，文字颜色text；<body text=”文字颜色”>链接的文字属性link；<body link=”属性的值，如（颜色）”>，alink可设置正在访问的文字颜色，vlink可以设置访问后的链接文字颜色。
《转载黑马教程》HTMLCSS讲义，仅供参考
《转载⿊马教程》HTMLCSS讲义，仅供参考今⽇内容：1. HTML标签：表单标签2. CSS：HTML标签：表单标签* 表单：* 概念：⽤于采集⽤户输⼊的数据的。
⽤于和服务器进⾏交互。
* form：⽤于定义表单的。
可以定义⼀个范围，范围代表采集⽤户数据的范围* 属性：* action：指定提交数据的URL* method:指定提交⽅式* 分类：⼀共7种，2种⽐较常⽤* get：1. 请求参数会在地址栏中显⽰。
会封装到请求⾏中(HTTP协议后讲解)。
2. 请求参数⼤⼩是有限制的。
3. 不太安全。
* post：2. 请求参数不会再地址栏中显⽰。
会封装在请求体中(HTTP协议后讲解)2. 请求参数的⼤⼩没有限制。
3. 较为安全。
* 表单项中的数据要想被提交：必须指定其name属性* 表单项标签：* input：可以通过type属性值，改变元素展⽰的样式* type属性：* text：⽂本输⼊框，默认值* placeholder：指定输⼊框的提⽰信息，当输⼊框的内容发⽣变化，会⾃动清空提⽰信息* password：密码输⼊框* radio:单选框* 注意：1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须⼀样。
2. ⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值3. checked属性，可以指定默认值* checkbox：复选框* 注意：1. ⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值2. checked属性，可以指定默认值* file：⽂件选择框* hidden：隐藏域，⽤于提交⼀些信息。
* 按钮：* submit：提交按钮。
可以提交表单* button：普通按钮* image：图⽚提交按钮* src属性指定图⽚的路径* label：指定输⼊项的⽂字描述信息* 注意：* label的for属性⼀般会和 input 的 id属性值对应。
如果对应了，则点击label区域，会让input输⼊框获取焦点。
黑马程序员HTML、CSS学习笔记
⿊马程序员HTML、CSS学习笔记HTML：//预格式化：保留⽂字在源代码中的格式，页⾯中显⽰的和源代码中的效果完全⼀致。
浏览器在显⽰其中的内容时，会完全按照其真正的⽂本格式来显⽰。
例如，原封不动地保留⽂档中的空⽩，如空格、制表符等。
//HTML中空格的显⽰：使⽤ 或者加空格的时候将输⼊法设为全⾓。
//超链接：指从⼀个⽹页指向⼀个⽬标的连接关系，这个⽬标可以是另⼀个⽹页，也可以是相同⽹页上的不同位置，还可以是⼀个图⽚、⼀个电⼦邮件地址、⼀个⽂件或者⼀个应⽤程序。
超⽂本链接是超链接的⼀种，是指⽤⽂字链接的形式来指向⼀个⽬标。
HTML⽂档类型:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">//只有确定了正确的DOCTYPE，XHTML⾥的标识和级联样式才能正常⽣效。
在HTML 1.0中有3种DTD声明可以选择，过度的Transitional、严格的Strict和框架的Frameset。
使⽤严格的DTD来制作页⾯当然是最理想的⽅式，但对于没有深⼊了解Web标准的⽹页设计者，⽐较合适的是使⽤过渡的DTD。
因为这种DTD还允许使⽤表现层的标识、元素和属性。
<!DOCTYPE html>：可以这样写⽽不⽤声明DTD。
基本结构：<!--注释内容-->//注释标签⽤来在源⽂档中插⼊注释，注释会被浏览器忽略。
<html>//html元素可告知浏览器这是⼀个html类型的⽂档。
<head>//定义在html语⾔头部的内容不会在⽹页上直接显⽰，它⽤于包含当前⽂档的相关信息，可以包含title元素、meta元素等。
<title></title>//页⾯标题元素。
html css js 黑马课堂笔记
*JavaScript 函数的定义
函数的定义有三种方式：
1.采用function关键字来定义 function fun(){}
2.采用匿名的方式来定义 var a = function(){}
3.采用new Function()的方式(了解,不推荐) var a = new Function("a","b","a+b") ;
*Javascript概述
* 作用： 用来添加动态效果
* 历史: 开始的名字叫livescript。w3c组织开发了标准ECMAAcript
* javascript和Java的区别：
* javascript是一个弱势语言,java是一个强势语言
* javascipt是由浏览器直接解析(解释性语言),java 是解析，编译混合型语言
BOM : browser object model 浏览器对象模型
DOM : document object model 文档对象模型(dom树,树状模型)
*JavaScript与Html的结合方式(掌握)
*Javascript与HTML的结合方式有三种：
1.采用事件来调用，代码写在字符串中
indexOf:
charAt() :
replace:
Number对象 ---- 数字原始类型引用类型
Num对象：
1. random() : 获得随机数[0,1)
2. ceil() : 返回大于等于次数的最大整数
3. floor() : 返回小于等于次数的最大整数
NaN: not a Number ,不是一个数字
htm第一章l基础知识总结
htm第一章l基础知识总结HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。
下面是HTML的基础知识总结：1. HTML标签：HTML由一系列的标签组成，标签用尖括号（< >）包围。
常用的标签包括<html>、<head>、<title>、<body>等。
2. 文本标签：用于定义文本内容的标签，例如：<p>用于定义段落、<h1>~<h6>用于定义标题、<a>用于定义链接等。
3. 图像标签：用于显示图像的标签，例如：<img>用于插入图像，其中的src属性用于指定图像的路径。
4. 列表标签：用于定义有序或无序列表的标签，例如：<ul>用于定义无序列表（包含点或其他标志）、<ol>用于定义有序列表（包含数字）。
5. 表格标签：用于创建表格的标签，例如：<table>用于创建表格、<tr>用于定义表格中的行、<td>用于定义表格中的单元格等。
6. 表单标签：用于创建表单的标签，例如：<form>用于定义表单、<input>用于输入字段、<button>用于定义按钮等。
7. 属性：标签可以带有属性，属性提供元素的额外信息。
例如，<a>标签带有href属性，用于指定链接的地址，<img>标签带有src属性，用于指定图像的路径。
8. CSS：CSS（Cascading Style Sheets）用于描述网页的样式和布局。
可以通过<style>标签或外部CSS文件将样式应用到HTML元素上。
9. 嵌套：HTML元素可以相互嵌套，一个元素可以包含另一个元素。
例如，<div>内部可以包含<p>、<a>等其他标签。
HTML笔记（适合新手入门）
HTML笔记（适合新⼿⼊门）HTMLWeb 标准构成Web标准不是某⼀个标准，⽽是由W3C和其他标准化组织制定的⼀系列标准的集合。
主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。
结构标准：结构⽤于对⽹页元素进⾏整理和分类，咱们主要学的是HTML。
最重要表现标准：表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS。
⾏为标准：⾏为是指⽹页模型的定义及交互的编写，咱们主要学的是 JavascriptHTML标签分类在HTML页⾯中，带有“< >”符号的元素被称为HTML标签。
所谓标签就是放在“< >” 标签符中表⽰某个功能的编码命令，也称为HTML标签或HTML元素。
1.双标签<标签名> 内容 </标签名>该语法中“<标签名>”表⽰该标签的作⽤开始，⼀般称为“开始标签（start tag）”，“</标签名>” 表⽰该标签的作⽤结束，⼀般称为“结束标签（end tag）”。
和开始标签相⽐，结束标签只是在前⾯加了⼀个关闭符“/”。
⽐如 <body>我是⽂字 </body>2.单标签<标签名 />单标签也称空标签，是指⽤⼀个标签符号即可完整地描述某个功能的标签。
⽐如 <br />HTML标签关系标签的相互关系就分为两种：1.嵌套关系<head> <title> </title> </head>2.并列关系<head></head><body></body>⽂档类型<!DOCTYPE><!DOCTYPE html>这句话就是告诉我们使⽤哪个html版本？我们使⽤的是 html 5 的版本。
html有很多版本。
web前端笔记整理一---HTML
web前端笔记整理⼀---HTML ⼀ HTML标签1 页⾯及标记1 HTML ⽂件结构拓展名 .html或者.htm<!DOCTYPE html>// 声明<html> html 主体<head></head> 头信息：浏览器，搜索引擎使⽤ title<body> // ⽤户看的hello wroldhello wrold</body></html>2 语⾔字符集(Charsets)的信息<meta http-equiv="Content-Type" content="text/html;charset=#">常⽤utf-8,gb2312 最好⾃⼰在浏览器的选项菜单内选择相应的语⾔3 背景⾊彩和⽂字⾊彩背景图象 <body background="image-URL">4 图⽚路径<img src="static/images/1.jpg"alt="这个是alt" /><!-- 当前⽬录下查找 -->5 链接<a>跳转到页⾯的另外⼀个地⽅<a href="#name"> ... </a><a name="name"> ... </a><a href="samp/window.html" target="_blank">开⼀个新窗⼝!</a>6 标尺线标尺线<hr size=10>⼆⽂字及⽂字布局1 6级标题<h1>…<h1/>到 <h6>…<h6/>2 ⽂字变化<b>加粗</b><em>斜体</em><i>斜体</i><small>变⼩</small><strong>加强加粗</strong><sub>上标</sub><sup>下标</sup>3 布局标签<!--布局标签--><!--div:⼤的块元素span:⼩的块元素ul li：列表dl dt dd：列表换⾏ <br><p>段落div span ul li dl dt dd4 表格表单<table>...</table> - 定义表格<tr> - 定义表⾏<th> - 定义表头<td> - 定义表元(表格的具体数据)<!--表格--><table><tr><td></td></tr></table>Form表单：method：post get put delete⽂件上传：Method postMultity-post-data单选框：radio复选框：checkbox输⼊：input传递⽅式：Get: url 地址传值 256字符Post: 后台：推荐这个placeholder="请输⼊⽤户名"<form action="url" method=*>......<input type=submit> <input type=reset></form>5 移动⽂字<marquee>啦啦啦，我会移动耶！</marquee>。
html标签学习笔记
</html>
----------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description"
here is a long quotation here is a long quotation here is a long quotation <p>
here is a long quotation here is a long quotation here is a long quotation.
ddddddddddddddddddd<br>
dddddddddddddd<br>
=====================插入表格=======================
<table border=2 align=center>
<tr>
<td>学习中心</td>
<td>学习中心</td>
</body>
</html>
-------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
黑马程序员python基础班教程笔记：html列表和表格简介
html列表
有序列表
在⽹⻚上⽣成的列表，每条项⽬上会按1、2、3编号，有序列表在实际开发中较少使⽤。
⽆序列表
在⽹⻚上⽣成的列表，每条项⽬上会有⼀个⼩图标，这个⼩图标在不同浏览器上显示效果不同，所以⼀般会⽤样式去掉默认的⼩图标，如果需要图标，可以⽤样式⾃定义图标，从⽽达到在不同浏览器上显示的效果相同,实际开发中⼀般⽤这种列表。
定义列表
html表格
table常⽤标签
1、table标签：声明⼀个表格
2、tr标签：定义表格中的⼀⾏
3、td和th标签：定义⼀⾏中的⼀个单元格，td代表普通单元格，th表示表头单元格
table常⽤属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的⽔平对⻚⽅式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对⻚⽅式 top | middle | bottom
6、colspan 设置单元格⽔平合并
7、rowspan 设置单元格垂直合并
传统布局：
传统的布局⽅式就是使⽤table来做整体⻚⾯的布局，布局的技巧归纳为如下
⼏点：
1、定义表格宽⾼，将border、cellpadding、cellspacing全部设置为0
2、单元格⾥⾯嵌套表格
3、单元格中的元素和嵌套的表格⽤align和valign设置对⻚⽅式
4、通过属性或者css样式设置单元格中元素的样式。
【黑马程序员】Web前端学习教程基础知识学习
【黑马程序员】Web前端学习教程基础知识学习1.web标准：web标准分三层结构，分别是结构（html）、表现（css）和行为（javascript）2.html的语言语法骨架格式：<html><head><title></title></head><body></body></html>3.html标签分类：常规元素（双标签），空元素（单标签）4.HTML标签关系：html的标签关系分2种，分别是嵌套关系和并列关系。
5.html标签语义化的目的：一、方便代码的阅读和维护。
二、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
三、使用语义化标签会具有更好地搜索引擎优化。
6.html的常用标签：标题标签h 、段落标签p 、水平线标签hr(认识)、换行标签br、div和 span标签、文本格式化标签（b、strong、i、em、s、del、u、ins）、图像标签img、链接标签a、注释标签<!-- -->7.路径：相对路径（一、同一级路径，二、下一级路径，三、上一级路径），绝对路径。
8.表格的基本结构骨架：<table><tr><td>单元格内的文字</td>...</tr>...</table>9.表格合并单元格：跨行合并：rowspan="合并单元格的个数" ，跨列合并：colspan="合并单元格的个数"，单元格合并三步曲（一、先确定是跨行还是跨列合并，二、根据先上后下先左后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量，三、删除多余的单元格单元格）10.列表：有序列表ol+li、无序列表ul+li、自定义列表dl+dt+dd（一般常用列表来做布局）11.表单：目的是为了收集用户信息。