JavaWeb编程前端笔记

HTML是什么：HTML 指的是超文本标记语言 (Hyper Text Markup Language) 

五大浏览器：IE,FireFox,Chrome,Opera,Safari

HTML基本标签：

1.标题标签：搜索引擎使用标题为您的网页的结构和内容编制索引。<h1></h1>

2.段落标签<p></p>

3.换行标签<br/>

4.水平线标签<hr/>

5.粗体/斜体标签<Strong></Strong>

6.转义字符 空格&nbsp；大于&gt；小于&lt；版权符号&copy；

标签的属性：为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性 值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行 定义。

图像标签：jpg,gif,png,bmp <img src="图片路径" alt="替代文字" title="鼠标停留时显示文字"  width="图片宽度" height="图片高度">

绝对路径：在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表 示文件的位置的方式就是路径

相对路径：使用当前目录作为基准来描述文件的地址

链接标签：<a href="path" target="目标窗口位置">链接文本或图像</a>

块级元素：块级元素（block element）：在网页中一般通过块级标签来将页面分块， 从而达到布局的效果

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

列表标签：列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并且 以列表的样式显示出来，以便浏览者可以快捷地获得相应的信息。

有序列表：<ol><li></li></ol>

无序列表：<ul><li></li></ul>

自定义列表：<dl><dt></dt><dd></dd></dl>

表格标签：<table></table>

表单标签：<form method="" action=""></form>

文本框标签：<input type="" name="" value="">

块级元素标签：div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将 一系列的链接组合在一起，就形成了文档的一个 division。标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工 具，并且不使用任何格式与其关联。

CSS概述

什么是CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标 准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等 文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚 本语言动态地对网页各元素进行格式化。

CSS语法：选择器{声明：}

引入CSS文件的方法：1. 内联方式(行内样式) 2. 内部样式表 3. 外联样式表（链接式和导入式）

链接式和导入式的区别：1、属于XHTML 2、优先加载CSS文件到页面

为什么一般使用外部样式表? 1. 内容和表现分离 2. 网页结构表现统一，以便于复用

CSS三种基本选择器：

CSS选择器的作用：选择页面中的某一个或某一类元素

基本选择器分为： 1. 标签选择器 2. 类选择器 3. id选择器

基本选择器的权重：

优先级：id选择器>类选择器>标签选择器

高级选择器：

层次选择器：层次选择器就是根据文档树形结构的层次级别来进行选择

层次选择器分为： 1. 后代选择器 2. 子选择器 3. 相邻兄弟选择器 4. 通用选择器

后代选择器：选择元素 选择元素的后代标签{声明}

子代选择器：选择子代（只有一代）

选择元素>子代元素的标签{声明}

相邻兄弟选择器(相邻弟弟选择器)： 与选择元素相邻，并且在下方的元素

选择元素+兄弟元素{声明}

通用选择器（弟弟选择器）: 选择标签之下的所有同级标签

选择元素~下方同级元素{声明}

属性选择器：属性选择器可以根据元素的属性及属性值来选择元素。

标签[属性]{声明}

正则表达式：=表示等价 *=表示包含值 ^=表示以 开头 $=表示以 结尾

选择器的权重：CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class> 元素

美化网页元素：1. 有效传递页面信息 2. 美化网页，页面漂亮才能吸引用户 3. 凸显页面主题 4. 提高用户体验

文本样式：1. 颜色 2. 对齐方式 3. 首行缩进 4. 行高 5. 装饰

列表样式：list-style-type 设置列表项标记的类型 list-style-position 设置在何处放置列表项标记。 list-style-image 使用图像来替换列表项的标记。 inherit 规定应该从父元素继承 list-style 属性的值。

其他常用属性：background-image 设置背景图片，通常以图片的链接方式定义值 text-shadow 设置文本阴影 三个值分别为，向右偏移长度，向下偏移长度，颜色 text-transform 控制元素中的字母 word-spacing 设置字间距 z-index 设置元素堆叠的级别

CSS盒子模型：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边 框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距