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(内容) - 盒子的内容，显示文本和图像。

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

JavaWeb编程前端笔记相关推荐

JavaWeb全套教程笔记_前端技术
JavaWeb全套教程笔记第一阶段_前端技术自己整理一套详细的笔记资料,可以满足平时查阅复习,还能帮助别人学习JavaWeb知识.JavaWeb教程分为四个阶段前端技术 1.HTML.2.CSS. ...
[前端笔记——HTML 表格] 8.HTML 表格
[前端笔记--HTML 表格] 8.HTML 表格 1.HTML 表格基础 1.1 什么是表格? 1.2 创建表格: 2.HTML 表格高级特性和无障碍 2.1 使用`<caption>` ...
[硬核]卷起来！两万六千字总结的JavaWeb核心技术学习笔记
文章目录前言 http协议笔记 JavaWEB笔记_1 JavaWEB笔记_2(JSP) JavaWEB笔记_3(web项目) Servlet Tomcat笔记总结前言大家好,我是ChinaM ...
多线程编程学习笔记——async和await（三）
接上文多线程编程学习笔记--async和await(一) 接上文多线程编程学习笔记--async和await(二) 五. 处理异步操作中的异常本示例学习如何在异步函数中处理异常,学习如何对多 ...
Spark编程指南笔记
Spark编程指南笔记标签: spark 编程笔记 | 发表时间:2015-02-02 16:00 | 作者: 分享到: 出处:http://blog.javachen.com/rss.xml 本 ...
多线程编程学习笔记——任务并行库（二）
接上文多线程编程学习笔记--任务并行库(一) 三. 组合任务本示例是学习如何设置相互依赖的任务.我们学习如何创建一个任务的子任务,这个子任务必须在父任务执行结束之后,再执行. 1,示例代码如下 ...
Python GUI编程(Tkinter)笔记
Python GUI编程Tkinter笔记 1 显示任意格式图片 2 固定框架Frame大小 3 选择文件夹或文件 4 展示菜单栏 5 展示选择的图片 1 显示任意格式图片 Tkinter只支持显示G ...
Shell 编程进阶笔记
这几篇博文主要记录博主的Linux 学习之路,用作以后回顾和参考.大家可以选择略过也可以作参考. (一)Linux 初步笔记 (二)Linux 进阶笔记(一) (三)Linux 进阶笔记(二) (四) ...
Javaweb编程中的乱码问题
程序中的乱码问题,主要出现在我们处理中文数据的过程中出现.从浏览器向服务器请求数据,服务器返回的数据在浏览器中显示为乱码.或者是服务器中的java文件用到中文,也有可能会出现乱码.数据库在处理数据的时 ...

JavaWeb编程前端笔记

JavaWeb编程前端笔记相关推荐

最新文章

热门文章