前端笔记html

1.必备工具：谷歌浏览器等浏览器。sublime文本编辑器。photoshop：用于编辑图片等。（用于切图）
2.浏览器就是为了展示界面。浏览器的兼容性很重要。五大浏览器：ie，谷歌，火狐，safari（苹果），opera。
3.写前端的工具：sublime，webstrom，visualcode。
4浏览器内核：分为两部分
渲染引擎：负责取得网页的内容（HTML,XML，图像等），整理讯息（例如加入css等），以及计算网页的显示方式，然后会输出至显示器或者打印机，浏览器的内核不同对于网页的语法届时会不同，所以渲染的效果也会不同。
js引擎：解析javascript语言，执行javascript语言来实现王爷的动态效果。
浏览器对js代码进行渲染，得到想要的界面。
5web标准：因为内核不同，，所以工作原理，解析肯定不同，显示就会有差别，所以应有一套web标准。
是一系列的标准，结构（html），表现（css），行为（js）
总结web标准：structure，pression，behavior
6.HTML（Hyper Text Markup Language）：超文本标记语言，用来描述网页的一门语言。不是编程语言，是一种标记语言。作用是用标记标签来描述网页，把网页内容在浏览器展示出来。用文字来描述网页标签。
标签<>,可以当做盒子，装东西
HTML的语法骨架：

(最大的标签，是跟标签) （文档头部） 标题（网页标题） （文档的主体） 7.标签关系 双标签：必须有开始标签，跟结束标签 但标签：单标签
(换行标签),

---

(水平线标签), (图像标签) /：是一个结束符，单标签数量比较少 标签关系：嵌套关系（父子关系） 并列关系 （告诉我们使用的html是哪个版本，即html5的版本，版本5比之前的多了些语法） (表示是英文版) ,编码方式还有gbk（全部中文字符），gb2312(简体中文)

8.标签的语义化：通过标签修饰，使人一眼看上去就知道重点是啥，更加清晰地接收页面知识（遵循的原则是先确定语义的HTML，再选合适的CSS）
html，css是两门不同语言
title：文档标签
排版标签：标题标签

…

逐渐降低，没有
sublime多行一起操作，百度链接， https://jingyan.baidu.com/article/2f9b480deb3bb441cb6cc234.html
段落标签

水平线标签

---

html 水平线特点是100%宽度水平分割线，并且独占一行，hr水平线将与上下内容一定距离。
换行标签
段落之间距离比较大，换行距离比较小
用来布局的标签：（div+css布局）是用来布局的盒子

一个占一行 多个可以占一行 文本格式化标签：加粗标签：仅仅是加粗有加强的语气 倾斜标签更有语义一些 删除线 语义更好 加下划线标签 图像标签：基本图像插入方式: 带有alt的图像: 属性 属性值 描述 src url 图像的路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标悬停时显示的内容 width 像素（XHTNL不支持%页面百分比） 设置图像的宽度 height （同上） 设置图像的高度 border 数字 设置图像边框的高度 链接标签： 百度 href属性:用于指定链接目标的url地址，当标签具有href属性时，就具有了超链接的功能 target属性：用于指定链接页面的打开方式，其取值有self和blank两种。其中self为默认值，blank为在新窗口中打开方式 注意： 1.外部链接需要添加http://www.baidu.com 2.内部链接 直接链接内部页面的打开方式。 首页 3.如果当时没有确定链接目标时，通常将连接标签的href属性定义为“#”（即href="#"）,表示该链接现在为空链接 4.不仅可以创建超文本链接，在网页中各种网页元素，如图像、表格、音频、视频的等都可以添加超链接 锚点链接：创建锚点链接分为两步： 1.使用"a href="#id名"链接文本/a"创建链接文本 2.使用相应的id名标注跳转目标的位置 3 个人生活

个人生活详细介绍

返回顶部：https://jingyan.baidu.com/article/656db918e9691ae381249c8f.html base标签：存放在head中的单标签,作用是设置整体链接的打开状态 但是base的不会影响到，自己设置的打开方式

特殊字符： 代表一个空格，<表示小于号，>表示小于号
https://www.jb51.net/onlineread/htmlchar.htm
注释标签： ,快捷键ctrl+shift+/
需要合理使用注释，需要将自己的代码加上合适的注释
路径：相对路径：图像文件与html文件位于同一文件夹，只需要输入图像文件的名称即可，如
图像文件位于html文件的下一级文件夹，输入文件夹名和文件名，之间用"/“隔开，如
图像文件位于html文件的上一级文件夹，在文件名之前加入”…/",如果是上两级，则需要使用"…/…/"，如
绝对路径：“D:\web\img\logo.gif”,或完整的网络地址，例如：“http://www.itcast.cn/images/logo.gif”，不推荐使用，因为换电脑，就不可用了。
列表标签：把文字等制成表，以表显示，容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是：整齐，有序，整洁
无序列表：各个列表项是没有顺序级别之分的

你喜欢的动物

• 狗
  
• 猫

注意事项：

中只可以嵌套
• 标签，
• 标签相当关于一个容器，可以容纳所有元素，无序列表会带有自己的样式属性

有序列表：有排列顺序的列表，

2. 
   

会自动根据顺序，显示顺序号
自定义列表：常用于对术语或名词进行解释与描述，自定义列表项前没有任何项目符号。

名词1

名词1解释1

名词1解释2

名词2

名词2解释1

名词2解释2

多个dd对应一个dt 样板： 北京（名词） 昌平（解释1） 顺义 海淀 重构：重新构建，div+css用于布局 表格：用来显示数据,通过标签显示行与列 (单元行) （单元格）

1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。
注意：

1. 中只能嵌套
2. 标签，他就像一个容器，可以容纳所有的元素

表格常用属性：https://www.cnblogs.com/duhuo/p/5662132.html
https://www.cnblogs.com/dongteng/p/5270836.html
属性名 含义 常用属性值
border 设置表格的边框
cellspacing 单元格之间的距离
cellpadding 内容距离单元格边框的距离
width
height
align 设置表格在网页中的水平对齐方式

一般设置为三参为0.border，cellpadding，cellspacing为0；默认这几个值不为0
表头表签（表头单元格）：一般位于表格的第一行或第一列。其文本加粗居中，为标签替代相应的单元格标签
表格标题：,放在表格内的第一行。caption标签紧跟table标签之后，只存在表格中。
表格结构：在使用表格进行布局时，可以将表格划分为头部（），主体（），和页脚（页脚因为兼容性问题，我们不再赘述）

合并单元格：从上到下，自左到右
跨行合并：rowspan
跨列合并：colspan

(单元行)
（单元格）

21	21
12

	12

1.先确认是跨行还是跨列， 2.先上后下，先左后右 3.删除的个数

下拉菜单和文本域：
label标签：label标签为了元素定义标注，作用：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点。
方式一：