HTML(学习记录)

HTML
前端脚本，浏览器能识别的脚本
html 标签库 （积木，界面太难看，无法定位）
伪xml规范
1.只有一个根节点
2.每个节点(多个子节点 多个属性 内容)
3.每个节点 （开节点 闭节点）
（1） 标签框架（html，head，body）
head 非显示，设置性标签
body 文档显示内容

按html5标准处理

（2）标签类型
基本标签
href 目标地址 target 页面显示位置
img可导致图片拉伸，不适合做背景
面板标签

标签容器 数据标签（表单标签） 定位标签 效果标签 列表标签

css 重叠样式表（控制积木位置和显示样式）
JavaScript 语言不同于java（积木交互事件，BOM,DOM）

校内课
国情：全栈。前后通吃。竞争力强，适应力强。
Java：java基础语法­>java高级部分­>web 前端
(html+css+javascript+jquery+bootstrap)­>SQL/mysql（jdbc）­> SSM框架­>SSH框
架­>大数据。对于java来说，前端比重略微少一些。
H5：web 前端(html+css+javascript+jquery+bootstrap) ­>html5+css3 ­>响应式，手
机­>node.js(express)­>mongodb/mysql­>MVVM框架­>vue­>react。前端比重重一
些。
UI：web 前端(html+css+javascript+jquery+bootstrap)
臧金玉，15963294666，537994666
长期上课。工具。录视频，记笔记。代码发下去。
web前端：html+css+js。前端三大件。《css世界》不是入门书。
jquery + bootstrap + 响应式（多媒体查询） + 移动设备（手机）。
html 主要负责框架、布局和结构。
css 主要负责样式、修饰
js 主要负责行为交互，动态效果。
器­>术­>法­>道
HTML：HyperText Markup Language，超文本标记语言。
hyper：超文本。在纯文本的基础上，还包括格式化的文本、图片、音频、视频等等。
标记：html 不是一门逻辑编程语言，标记语言，所有内容全部由标记组成。
一个html文档全部由标记组成，不同的标记代表不同的含义。
标记：由左尖括号和右尖括号，以及其中的关键字所构成。html是xml的一个子集。
通常，html标记由开始标记和结束标记所构成。结束标记比开始标记多出一个 /。开始
标记和结束标记互为一对，结束标记在后，开始标记在前。
开始标记和结束标记，以及其中的内容，全称为一个html元素。一个标记中可以嵌套其它的标记，相当于构成了一个树型结构。
父，子，后代，祖先，兄弟，相对而言。
html 文档结构：
1 //html5的声明
html 文档版本声明。
html 文档，是需要浏览器来解析（解释执行）的。
html 文档版本声明，就是告诉浏览器，当前html文档的版本是什么。
一个html文档，有且只能有唯一的一个html元素。
html里面有head和body标记，head和body也是唯一的。head在前，body在后。
head标记是用于给html文档指定一些设置，而不是用于显示。
body标记中的内容是用于显示的。
title 标记，有且只能有一个。用于指定网页的标题，网页的标题并不影响网页的显
示。
seo，搜索引擎优化。

是用于指定网页的编码格式。 写网页的时候，一律使用utf­8编码。utf­8 是最流行的，最通用的编码（万国码）。 ASCII：256个字符。1个字节。 GB2312：中文简体字符集 GBK：包括一些生僻字。 GB18030：中文大字符集。包含了 CJK 字符。 BIG5：繁体中文字符集。 Unicode 字符集：旨在为全球的国家，民族提供一个统一的超大字符集。10万个以上 字符。4 以及 4+。 UTF­8 字符集，是对unicode字符集的一种压缩传输方案。 基本常用标记 1. 6级标题。h1 ~ h6。标题有加粗效果，空间上独占一行。有上下边距。标题有align属性，此属性用于指定水平对齐方式。 2. p 标记是段落标记。有前后边距，空间上独占一行。p 也有 align 属性。 3.img 标记。图像标记，用于在网页上显示一副图片。src 属性，用于指定图片的路 径。alt 属性：不常用，用于指定图片的主题或相关关键字，当图片不能正常显示的时 候，可以给用户一个告知。对于 seo 很有用。 img 是单标记。没有结束标记的标记称为单标记。单标记，可以在标记的最后加一个 /，也可以不加。按照规范，建议加上。 当图片指定的宽度和高度比，和原图不一致时，就会出现拉伸和压缩的情况 图片标记不独占一行，从左向右依次排列。 空间上凡是独占一行的标记，称之为块状标记。飞流直下三千尺。包括：6级标题，p 标记 空间上不独占一行的标记，称之为内联标记。一江春水向东流。包括：img 4。注释标记： 1. 是换行标记。作用：就是换行。 6。

---

水平线标记。 有一些标记，不需要指定内容（通过标记本身的关键字就已经足够表明含义了），或 者说，可以通过属性指定内容。 在标记中，可以添加属性。属性语法：key="value"，属性是需要有引号的，单引号和 双引号都可以。 属性值，可以使用单引号，也可以使用双引号，但是一定要配对使用。 当有一个标记有多个属性的时候，多个属性之间，使用英文空格分隔。 注意：html 语法是不区分大小写的。按规范：全部小写，属性使用双引号。 浏览器 建议使用 chrome 和 firefox，如果有条件，可以多一个IE，edge浏览器。 全球能开发浏览器：微软，谷歌，苹果，火狐，欧朋（被360收购了）。 360，2345，qq，红芯浏览器， 山寨垃圾浏览器。快捷键： F12 开发者工具。chrome 和 firefox 做得最好。Firebug 插件。 ctrl + k，整理代码格式。 ctrl + /，注释。注释标记，浏览器是不解析的，仅用于开发者备注，说明使用。 像素是相对单位。不同的屏幕设备上，1像素对应的物理大小是不一致的。 物理像素：屏幕支持的最高分辨率，通常就是物理像素个数。 逻辑像素：非物理像素，是由不定数量个物理像素虚拟出的逻辑单位。 ppi：单位尺寸（面积）上的物理像素的数量。72。 手机上：一般都是大于200。

文本格式化 内联标记。
1.文字加粗效果： bold。在 html4 版本，b 标记使用很长时间。在H5中，建议使
用更加有语义化的标记。 表示强调，加重语气，本意没有加粗的意义。加
粗只是强调的一种体现而已。
2. 是斜体标记。对应的语义化的标记是 em。
3.删除线。 。对应的语义化的标记 .
4.文字的放大和缩小。 和 。放大和缩小的效果是可以叠加的。
5.上标和下标： <sup>和 <sub>。
6. 标记：设置字体。color属性用于控制颜色。size属性用于控制字号大小。
face 设置字体，前提是浏览器所在主机已经安装了对应的字体。
语义性：现代h5的规则，尽量有语义性。编程的思想。语义化的另一个好处：方便其
它对象（人或爬虫）阅读代码。
center 标记：可以使文本居中。 但是目前在 h5 中已经不建议使用。
RGB：网页的一种颜色表现机制。Red Green Blue，三原色。65535 种颜色。
R: 0 ~255
G:0 ~ 255
B:0 ~ 255
可以搭配种几乎各种需要的颜色。0，0，0 黑色。255,255,255 白色。255,0,0 红色。
0，255，0 绿色。0，0，255蓝色。
使用十六进制来表示。FF ,两位16进制就可以表示 256种状态。
使用 6 位16进制数，可以表示一个RGB颜色。
1 #ffffff：白色
2 #000000：黑色。#000
3 #ff0000：红色。#f00
4 #00ff00：绿色。#0f0
RGB简写：对每两位16进制都重复的进行简写。
FFF = 1000 ­ 1 = 16^3 ­ 1
列表。块状标记
无序列表：</sub></sup>

• ，unorderd list，需要和
• 标记结合使用。 li : list item缩写，
  列表项的意思。每一个li都是一个列表项。
  ul 在空间上是占满一行的，块状标记。项目符号是相同的。
  type 属性用于控制项目符号的样式。有三个值，circle 圆环。disc实心圆点，square
  方块。
  对于列表项顺序性不是很强，或者不敏感的情况下，可以使用无序列表。
  有序列表：
  1. ordered list
     对于列表项有顺序要求的场景，一般使用有序列表。同样列表项使用li。
     type 属性可以更改项目编号的样式。1,A,I，a，i。
     1。表示项目编号使用阿拉伯数字。默认就是此项。
     A。表示项目编号使用大写的字母。
     a.表示项目编号使用小写的字母。
     I。大写罗马数字。
     i。小写罗马数字。
     定义列表：

     defind list
     dt 表示列表项的标题。dd 表示列表项的内容。dd 默认有一个向右的缩进。
     定义列表，没有项目符号，或者项目编号。
     每一个dt和dd 是一对。
     实际情况下，经常要么全部使用 dt，要么全部使用 dd。
     超链接，内联标记
     a 标记。 href 属性表示要链接的地址，可以是网络地址，也可以是本地页面。
     超链接默认样式，蓝色，有下划线，鼠标没过，显示手的形状，点击时，变成红色，
     访问过后，变成紫色。
     点击超链接之后，当前页面会跳转到指定的页面。
     链接的地址，可以是绝对路径，也可以是相对路径，通常建议使用相对路径。 …/
     表示上一层目录。 ./ 表示当前目录。
     超链接还可以链接到页面的某个位置。语法： < /a> ，位置可以随意定义，只需要在需要的位
     置上，给标记定义一个id属性可以了。
     target 属性：指定以何种方式打开新的网页。_blank 表示新打开一个页面，当前页面
     保留。
     _self 在当前页面打开。默认就是_self。
     表格
     也是比较常用的标记。类似 excel 用于以表格的形式展示数据。

：需要结合 tr 、 td 来使用。 tr 是表格的一行，table row td 是表格的一个单元格。table data。 border 属性：边框，值的改变，只影响最外面表格的边框。 width 属性：可以是像素值，也可以是百分比。 height属性:和width类似。 cellspacing：单元格之间的间距。 cellpadding：单元格中的内容与单元格之间的间距。 对表格设置 align 属性，可以控制整个表格的水平对齐方式。 在 tr 上设置 align属性，可以控制整个tr的内容的水平对齐方式。 在 td 上设置 align 属性，可以控制单个td的内容的水平对齐方式。 在 tr 上设置高度，可以控制整个行的高度。tr 上没有宽度设置，行的宽度等同于表格 的宽度。 在 td 上设置高度，可以控制其所在的行的所有 td 的高度。在 td 上设置优先级要高于 在 tr 上设置。 在 td 上设置宽度，可以控制其所在的列的所有 td 的宽度。 在属性设置上，后设置的优先级高于先设置的。 bgcolor 设置背景色。可以设置在表格上，可以设置在 tr 上，可以设置在 td上。 在 td 上设置，仅设置所在 td , 在 tr 上设置，设置整个 tr , 在表格上设置，是设置整个 表格。单元格的合并： colspan：水平方向上合并。 rowspan：垂直方向上合并。 表单 通用属性 id 是通用属性，所有标记都可以设置id属性，id属性表示一个标记的编号，在整个页 面需要是唯一的。 属性的位置，通常不重要。一般情况下，没有冲突。 表单： form 标记：表单元素。块状标记。 action 属性，表示向服务器哪一个地址进行提交。 表单元素（组件，控件）：大部分是input标记，少数是其它标记。 文本框：input type='text'。内联标记。 size 属性可以控制文本框的长度，此属性不重要。 maxlength 属性用于控制输入字符的最大数量。中文同样如此。 placeholder 属性用于给用户一个提示，不是真正的文本框中的文字。 readonly：此属性表示只读。用法:readonly="readonly"，可以简写成 readonly。此属 性叫布尔属性。 disabled：此属性表示不可用。禁用。表示不能输入。可以简写成 disabled，布尔属 性。 密码框：input type="password" ，密码框的属性和文本框完全一致。 特点：输入字符不可见。 下拉列表框： select ：结合option标记使用，每一个option标记就是就个下拉列表项。 size 属性用于控制同一时刻可见的选项数目。 每一个option都有一个value属性。当被选中时，就作为整个select的value值。 单选按钮：input type='radio' name属性：所有name属性值相同的单选按钮构成一组，同一组内的单选按钮，一次 只能选中一个。 readonly对其无效，disabled有效。placeholder对其无效。 checked：表示被选中。 可以有 value 属性。 复选框： input type='checkbox'。属性和单选按钮类似。 文本域：textarea， rows 控制显示行数，间接控制显示大小。并不精确。 cols 控制显示列数，间接控制显示大小。并不精确。 其它属性和文本框类似。 文件域：input type='file'，用于上传文件的。 按钮： input type='button'，普通按钮，需要自定义行为。input type='submit'，表示向指定的地址进行提交。 input type='reset' 重置，将表单元素默认值重置到初始状态。 注意事项：textarea 是双标记，所以 value 无效，内容需要直接写在双标记之间。 表单元素中，textarea 和 select 是双标记。 iframe : 框架标记。内联标记。 src 用于指定页面地址，可以是远程地址，也可以是本地地址。 实体符号，符号实体。注意：实体符号是包括分号的。 < less than > greater than 公共属性： 1.readonly，表示只读 2.disabled，表示不可用。 3.id，表示一个标记的唯一编号 4.name：表单元素的名称 5.value：表单元素的值。 6.class ：类名称。 IT 行业：信息技术 软件： 开发：项目经理。付出比较多，成材比较快。市场需要。 后端：java,.net，php，python,asp。 前端：html+css+javascript+node.js+es6+vue+react+monbodb/mysql 测试：黑盒，白盒，烟雾，压力，单元，集成，上线测试。 支持：技术支持。前端。产品经理，培训人员，售前售中售后技术支持。 硬件：企业赚钱。 运维：软件+硬件。DevOps。待遇巅峰最高。需要最高的技术知识储备和经验储备。对知识，经验的广度和厚度都非常高。 Unix: Aix。 Oracle sun： python：火。web。写工具和脚本，以及语言的粘合。优雅，明确，简单。 一门语言越高级，性能一定越差。企业追求不是性能，而是生产力，利润。 一人多能。 java：单片机编程。Oak。转向网络 applet。flash。H5 javaSE，javaME，javaEE。 MobileEdtion：安卓，IOS javaEE：IBM 软件基金会。Java Enterprise Edition。= java web 编程。 Oracle只有javaSE。 java 强项，就是 web 编程。企业级编程：安全性、抗压性，健壮性，稳定性。 html（框架结构） + css（样式修饰） + js（行为交互） css : Cascade Style Sheet 层叠样式表 样式的引入方法： 1。行内样式：在标记内添加 style 属性。 style 中的样式，是以 key:value 形式，可以写多个。多个样式之间使用分号分隔。 常用样式： font­weight: bold; 字重 font­size: 40px; 字号 color: red; 前景色 font­style: italic; 字体样式，斜体 2。页内样式。在head 标记中，添加一个style 标记，在标记中定义样式。 css 选择器：选中要进行样式修饰的元素。 1.标记选择器。直接使用标记名称。 2.id 选择器。直接使用 id 属性值。语法：前面加 # 号。 3.类选择器。使用最广泛，最频繁的选择器。语法：前面加 . 号。同时标记要指定 class 属性。 每一个标记都可以指定 class 属性，可以指定多个值 ，多个值之间使用空格分隔。 常用样式：width: 160px; 宽度 height: 50px; 高度 text­decoration: underline; 对文本进行装饰，下划线。