前端入门最全学习笔记--html

常见浏览器介绍

1.1 常见浏览器的内核

（面试，移动端开发）---->渲染引擎 &  JS引擎

IE浏览器（Trident）–>edge,360,百度浏览器，猎豹浏览器
火狐浏览器（Gecko）—>代码开源
谷歌浏览器（Blink 渲染引擎，内置于chrome中，是webkit的分支）
Edge浏览器（Trident）
Safari浏览器(webkit)
Opera浏览器（Opera）

1.2web标准

结构(html)标准：整理分类网页元素，xml和xhtml
样式(css)标准: 设置网页元素的版式，颜色，大小，外观，主要指css
行为(js)标准：网页模型的定义及交互的编写，主要包括DOM和ECMAScript

2.html(超文本标记语言)初识

2.1 骨架格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

2.2 标签分类

双标签

<标签名>内容</标签名>

单标签

<标签名/>

2.3 标签关系(嵌套，并列)

后代大于兄弟加，注释选择Ctrl /

2.4 文档类型html5<!DOCTYPE>

<!DOCTYPE html>

2.5 字符集

<meta charset="UTF-8">
gb2312 简单中文
GBK gb2312的扩展，包含全部中文字符

2.6 标签语义化(指定标签的含义)---->面试重点

非语义元素的例子：

和 ---->无法提供关于其内容的信息。
语义元素的例子：、
以及 ---->清晰地定义其内容。

HTML5新语义化标签

header footer main只能出现一次
header :页眉       article :独立的内容
footer ：页脚      aside :辅助信息的内容
main : 主体        figure :描述图像或视频
hgroup ：标题组合   figcaption :描述图像或视频的标题部分
nav :导航          article包含section
section :区域      datalist:选项列表
details/summary: 文档细节/文档标题
progress/meter : 定义进度条/定义度量范围
time ： 定义日期或时间
mark :带有记号的文本<input type="text" list="elems"><datalist id="elems"><option value="a"></option><option value="b"></option><option value="c"></option></datalist><details><summary>html</summary><p>超文本标记语言</p>
</details><progress value="5" max="10"></progress>
<meter value="5" max="10"></meter>   //根据一个value值会发生颜色的变化
<p>今天是<time title="5-20">5.20</time></p>
<p>今天是<mark>5.20</mark></p>

3.html常用标签

3.1排版标签

3.1.1 标题标签(熟记)

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>   //最小到6级

3.2.2段落标签（记）

<p>文本内容</p>   //段落不粗，标题粗

3.3.3水平线标签

<hr />单标签

案例：新闻页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1><p>2016年7月27日 10:58:26 来源： 新华网</p><hr /><p>新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</p><p>上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天</p><p> 在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p><p>由于气温实在太高，上 海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p></body>
</html>

3.4.4换行标签

<br />

div span标签
没有语义，网页布局的两个盒子

3.2 文档格式化标签

标签显示效果
文字以粗体显示，（XHTML推荐使用strong）
文字以斜体显示，（xhtml用em）
加删除线，(XHTML 用del)
加下划线，（XHTML不赞成U）

3.3标签属性

<标签名 属性1:"属性值1" 属性2:"属性值2" ...>内容</标签名>
<a href="http://www.w3school.com.cn">This is a link</a>
<h1 align="center">
<body bgcolor="yellow"> 
<table border="1">

3.4 图像标签

属性属性值描述
src URL 图像的路径
alt 文本图像不能显示时的替换文本
title 文本鼠标悬停时显示的内容
width 像素图像宽度
height 像素图像高度
border 数字图像边框宽度

<img src="" />
<img src="" alt="" />
<img src="" title="" />
<img src="" height="" width="" border="" />

3.5 链接标签(熟练)

<a herf="跳转目标" target="目标窗口的弹出方式">文本图像</a><a href="http://www.baidu.com" >百度</a>  //外部连接必须http://开头
<a href="xxx.html"></a>                  //内部连接不必须加http

3.5.1锚点定位(百度百科定位)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title></head>
<body>
<h2>目录</h2>
<hr />
1 早年经历<br /><a href="#movie">2 演艺经历</a><br /><a href="#live">3 个人生活</a><br />
4 主要作品<br />
5 社会活动<br />
6 获奖记录<br />
7 人物评价<br /><h3>早年经历</h3>
<hr />
刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意[17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼[18]  。刘德华从黄大仙天主教小学毕业后升读可立中学[19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路[20]  。<h3 id="movie">演艺经历</h3>
<hr />1981年，刘德华考进第10期无线电视艺员训练班[21]  ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22]  ；该剧获得美国电视节电视剧特别奖[23]  。
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24]  ；同年在
刘德华早期照片
刘德华早期照片(2张)喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25]  。
1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26]  ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27]  。
电影时代
1981年，刘德华出演电影处女作《彩云曲》，在片中扮演一个音乐班
刘德华电视剧剧照
1993年，在古装片《战神传说》中扮演一个武功超群的渔民[54]  ；<br/>
1990年，凭借专辑《可不可以》奠定其在歌坛的地位[112]  ；专辑同名主打歌《可不可以》获得第十三届十大中文金曲
刘德华(3张)华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张[119]  ；同年，在提前录制的央视春晚视频中，刘德华与毛阿敏合唱歌曲《心中常驻芳华》[120]  ；此外，他还发行了专辑《谢谢你的爱》，同名主打歌曲获得第十六届十大中文金曲奖[121]  。<h3 id="live">个人生活</h3>
<hr />刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）[158]  。
感情.
<h3>主要作品</h3>
<hr />
参演电影
我的特工爷爷2016-04-01<br/>
饰演李政玖 导演洪金宝 主演洪金宝, 朱雨辰, 李勤勤<br/>
澳门风云32016-02-08<br/>
饰演刀仔 导演王晶 主演周润发、刘德华<br/>
1/3
音乐作品
内容来自
热门歌曲
01. 冰雨  
02. 来生缘 
03. 天意  </body></html>

使用链接文本创建文本链接 ----->演艺经历
使用相应的id 名标注跳转目标的位置------>
演艺经历

3.5.2 base nofollow

<base target = "_blank" />  //让页面中的元素整体都以新窗口的方式打开

3.9 特殊字符标签

3.10 注释标签

// ctrl+/ ctrl +shift+ /

4.路径

4.1 相对路径(用的多)

同一级,直接图片名
隔一层，images/图片

4.2 绝对路径(用的少)—>c:\Users\apple…

5.列表

无序列表
- 列表1
- 列表2
- 列表3
有序列表
1. Coffee
2. Milk
自定义列表

6.表格

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<body><table border="1" cellspacing="0" cellpadding="6" height="200" width="300" align="center" > <header>标题</header><!-- cellspacing合并单元格，cellpadding单元格内容和单元格撑开 --><thead><tr><th>性别</th><th>性别</th><th>年龄</th>   <!--  //th为表头标签--></tr> </thead><tbody><tr><td>鸣人</td><td>男</td><td rowspan="2">跨列合并单元格</td><!-- 从上往下删除，合并两个，删除一个 --></tr><tr><td>鸣人</td><td>男</td></tr><tr><td>佐助</td><td colspan="2">跨列合并单元格</td></tr></tbody></table>
</body>

html里边没有列，只有行和表格的写法

表单和表单控件

名：

姓：

表单控件：

用户名:
密　码:
性　别:　女男人妖未知
爱　好:　足球篮球乒乓球
搜索：

     <input type="image" src="im.jpg" /><!-- 图像按钮 --><br />上传头像: <input type="file" />  <!-- 文件按钮 --></body>

label标签：绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

Male
textarea控件(文本域)
文本内容
下拉菜单
选项1 选项2 选项3
表单域
用户名：
密码：

8.html5新增标签和属性

常用新标签

语义 :定义页面的头部页眉

语义 :定义导航栏

语义: 定义页面底部页脚

语义: 定义文章

http://www.ppmy.cn/news/476617.html

详细解读八大无线网络安全技术利弊

浩瀚的大海，深邃的崖洞，在一片银白的沙滩上，膝盖上放着笔记本的您正姿态优雅地在躺椅上查看最新的股价信息、足球资讯，正在享受自由、可移动、随时随地的无线网络所带来的无限空间。突然，鼠标停滞，屏幕模糊…

编程范式学习

编程语言编程语言是人与计算机沟通的桥梁，它们的存在使得我们可以用人类易于理解的方式来编写计算机程序。在了解编程语言之前，我们需要先了解一些相关的概念。机器语言机器语言是计算机能够直接理解和执行的语言，它由二进制代码组成&a…

每日复盘｜6月19日

7:00-7:20 起床洗漱到教室 7:30-8:15 乐词 8:15-9:05 听力con*1 lec*1 9:05-10:47 听力真题 11:00-11:50 考研英语阅读真题 12:00-12:30 午饭🥣+桃子🍑 12:30-13:30 不背单词 13:30-14:00 午睡 14:00-…

6-JMM

目录 1.主内存与工作内存 2.内存间交互操作 Java内存模型的三大特性： happens-before原则（先行发生原则）： 3.volatile型变量的特殊规则 ①保证此变量对所有线程的可见性 ②使用volatile变量的语义是禁止指令重排序 JVM定义…

中间件 -zookeeper

三连支持一起鼓励一起进步 zookeeper 文章目录一、概述1.Leader 角色2.Follower 角色3.数据同步4. 2PC提交5. Observer 角色6. leader 选举7. 集群组成6. 惊群效应二、Curator三、应用场景总结一、概述首先，在分布式架构中，任何的节点都不能以单点…