首页 / 知识

Web基础--HTML、Css入门

2023-04-11 14:07:00

Web基础--HTML、Css入门
　　浏览器（客户端）、服务器、数据库。
 
　　客户端通过Servlet/JSP与服务器进行联系，服务器通过JDBC与数据库进行联系。
 
　　（1）如何对服务器进行编程。
 
　　（2）如何对数据库进行编程。
 
　　（3）如何使服务器访问数据库。
 
　　（4）如何对客户端进行编程。
 
　　（5）如何使客户端访问服务器。
 
　　（6）如何使用框架提高效率。
 
　　（1）HTML：用来勾勒出网页的结构与内容。
 
　　（2）CSS：用来装饰网页。控制页面的外观和表现。
 
　　（3）JavaScript：用来使网页出现动态的效果。控制页面的行为。
 
　　HTML是部署在服务器上的文本文件。
 
　　（1）根据HTTP协议，浏览器发送请求到服务器。
 
　　（2）服务器做出响应，并返回响应请求到浏览器。
 
　　（3）浏览器执行HTML，并显示内容。
 
　　即HTML部署在服务端，运行在客户端。
 
　　（1）XML（Extensible Markup Language）指可扩展标记语言。主要用于存储或传输数据以及作为配置文件。（重点为数据的内容）
 
　　（2）可扩展表现为：标签可扩展、属性可扩展、元素之间嵌套关系可扩展。
 
　　（3）严格要求标签的嵌套、配对，属性必须要有值，属性值写在引号中。
 
　　（4）XML解析方式：
 
　　DOM解析方式：指Document Object Model，即文档对象模型，是W3C组织推荐的一种处理XML的一种方式。DOM解析文档时，会将文档中所有元素，按照其出现的层次关系，将其解析成一个一个的Node对象（节点）。DOM优点：把xml文件在内存中构造出树形结构，可以遍历并修改节点。缺点：如果文件较大，内存有压力，解析时间长。
 
　　SAX解析方式：指simple API for XML ，是一种XML解析的替代方法。SAX逐行扫描文档，边扫描边解析。相比于DOM，SAX是一种速度更快、更有效的方法，且SAX可以在解析文档的任意时刻停止解析。SAX优点：解析速度快，没内存压力。缺点：不能对节点进行修改。（比如安卓）
 
　　（1）HTML（HyperText Markup Language）指超文本标记语言，是一种纯文本类型的语言。用于显示数据。（重点是数据的外观）
 
　　（2）可以理解为固定的XML，标签固定、属性固定、元素嵌套关系固定。
 
　　（3）HTML存在多个版本，若不能正确识别版本，则浏览器不能正确的显示页面。使用<!DOCTYPE>用于声明HTML版本。
 
　　（4）基本结构：
 
　　（5）<head>标签：
 
　　是所有头部元素的容器。
 
　　<head>可以有元素<title>,<meta>,<link>,<style>,<script>。用于设置文档标题、编码、引入的资源。
 
　　<title>定义页面标题，若不设置，则默认为当前文件名。
 
　　<meta>提供关于HTML文档的元数据，该数据不会显示在页面上，但对于机器是可读的。常见属性有：content, http-equiv, charset。用于规定页面的描述、关键字、文档的作者、最后修改的时间以及其他元数据。
 
　　（1）作用：
 
　　文本是网页上的重要组成部分，直接书写的文本会使用浏览器的默认样式显示。
 
　　（2）分类：
 
　　标题元素（<h1> —— <h6>）。
 
　　段落元素（<p>）。
 
　　列表元素（<ol> <li>,      <ul> <li>）。
 
　　分区元素（<div>，  <span>）。
 
　　行内元素（<i>,  <em>,   <br>等）。
 
　　（3）标题元素（<h1> —— <h6>）：
 
　　标题元素使文字突出，一般用于文章的标题，显示不同的字体大小。
 
　　语法规则：
 
　　（4）段落元素（<p>）：
 
　　段落元素提供了结构化文本的方式。文本会用单独的段落显示，与前后文本分开，并添加一段额外的垂直空白距离。可以使用<br>主动换行。
 
　　语法规则：
 
　　（5）列表元素（<ol> <li>, <ul> <li>）：
 
　　列表将具有相似特征或者具有先后顺序的几行文字进行排序。所有的列表都由列表类型和列表项组成。
 
　　列表类型：有序列表（<ol>），无序列表（<ul>）。
 
　　列表项指：<li>，用于显示具体的列表内容。
 
　　语法规则：
 
　　（6）分区元素（<div>， <span>）
 
　　分区元素用于元素分组，常用于页面布局，便于开发。
 
　　语法规则：
 
　　（7）行内元素（<i>, <em>, <br>等）
 
　　（1）图像<img>:
 
　　使用<img>元素将图像添加到页面。
 
　　必须存在的属性：src（添加路径）。常用属性：width, height。
 
　　语法规则：
 
　　（2）超链接<a>:
 
　　使用<a>元素创建一个超链接。
 
　　语法规则：
 
　　（3）锚点（特殊的超链接）：
 
　　锚点是文档中某行的一个记号，用于链接（跳转）到文档中的某个位置。
 
　　语法规则：
 
　　（4）表格：
 
　　表格通常用来组织结构化的信息。表格是由一些矩形框（单元格）按照从左到右，从上到下的顺序排列而成的。表格的数据显示在单元格内。
 
　　（1）表单的作用：
 
　　表单用于显示、收集信息，并提交信息到服务器。表单是浏览器向服务器传输数据的手段。
 
　　表单处理：
 
　　实现数据交换的可见界面元素，比如文本框、按钮等。
 
　　提交后的表单处理（不可见）。
 
　　（2）表单<form>：
 
　　？使用<form>元素创建表单。并在<form>元素中添加表单控件元素。即form元素在页面上有固定的表单范围，其内部的空间才可提交。
 
　　主要属性：
 
　　（3）表单控件：
 
　　表单控件元素是包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息。即表单控件是一种HTML元素，是信息输入项。表单可以包含很多不同类型的表单控件。
 
　　常用表单控件：
 
　　（4）<input>标签：
 
　　<input>元素用于收集用户信息。该元素是一个单标记，即格式为<input />。
 
　　（5）<textarea>标签：
 
　　（6）<select>标签：
 
　　（1）什么是CSS？
 
　　CSS（Cascading Style Sheets），指层叠样式表。样式通常存储在样式表中，定义如何显示HTML，即CSS给HTML化妆（修饰）的。
 
　　（2）如何使用CSS？
 
　　内联方式：即样式表定义在单个HTML元素中。
 
　　内部样式表：样式定义在HTML页的头元素中。
 
　　外部样式表（推荐使用）：将样式定义在一个外部的CSS文件中（。css文件）。由HTML页面引用样式表文件。
 
　　（3）CSS内联样式：
 
　　样式定义在HTML标签的style属性里。
 
　　语法规则：
 
　　（4）CSS内部样式：
 
　　样式定义在HTML文档的头部标签<head>的<style>标签内。
 
　　语法规则：
 
　　（5）CSS外部样式：
 
　　样式定义在独立的（。css）文件里。是一个纯文本文件，文件后缀名（。css）。该文件只包含样式规则。然后在HTML的头部标签<head>中通过<link>元素来引用。
 
　　语法规则：
 
　　（6）CSS规则特性：
 
　　继承性： 父元素的CSS声明可以被子元素继承、比如字体、颜色等。
 
　　层叠性：  同一个元素若存在多个CSS规则，对于不冲突的声明可以进行叠加。
 
　　优先级：  同一个元素若存在多个CSS规则，对于冲突的声明可以以优先级高的为准。即相同的样式，如果重复定义，则以最后一次定义为准（就近原则）。
 
　　（7）CSS写法：
 
　　CSS由CSS选择器以及CSS声明组成。
 
　　选择器用于定位到某个元素。
 
　　声明用于给元素附加效果。
 
　　（1）分类：
 
　　元素选择器。
 
　　类选择器。
 
　　id选择器。
 
　　选择器组。
 
　　派生选择器。
 
　　伪类选择器。
 
　　（2）元素选择器：
 
　　通过元素名（标签名）来选择CSS作用的目标。
 
　　（3）类选择器：
 
　　类选择器允许以一种独立于文档元素的方式来指定样式。所有能附带class属性的元素都可以使用此样式声明，并将元素的class属性值设置为样式类名。
 
　　（4）id选择器：
 
　　id选择器以一种独立于文档元素的方式来指定样式。仅作用于id的值。
 
　　格式：
 
　　（5）选择器组：
 
　　选择器组是以逗号隔开的选择器列表，将一些相同的规则作用于多个元素。
 
　　（6）派生选择器：
 
　　派生选择器用来选择子元素。
 
　　分类：
 
　　后代选择器：选择某元素的所有后代（子孙）元素。（以空格隔开）
 
　　子元素选择器：选择某元素的所有子（儿子）元素。（以>隔开）
 
　　（7）伪类选择器：
 
　　伪类用于设置同一元素在不同状态下的样式。
 
　　（1）样式规则：
 
　　（2）boeder（边框）
 
　　border属性：用来设置元素的边框。
 
　　（3）box
 
　　框模型（box model）定义了元素框处理元素的内容、内边距、边框、外边距的方式。
 
　　内边距（padding）：元素的内容与border间的距离。默认为0 。
 
　　外边距（margin）：border与另外一个元素的距离。默认为0 。
 
　　注：增加内边距、外边距、边框的尺寸不会影响元素的内容尺寸，但会增加元素实际总尺寸。元素的内容尺寸与width与height有关。
 
　　（4）background
 
　　（5）font
 
　　用于格式化文本信息。
 
　　（6）table
 
　　表格同样也有box框（边框、内边距、外边距、宽、高）以及文本格式化属性。
 
　　若设置了单元格的边框，则相邻单元格的边框会单独显示（默认，即边框与边框间有缝隙）。
 
　　（1）定位
 
　　（2）流定位（默认）
 
　　页面中的块级元素框从上到下一个接一个排列。每一个块级元素都会出现在一个新的行中。元素框间的垂直距离是由框的垂直外边距计算出来的。
 
　　行内元素在一行中从左到右排列，水平布置，不从新行开始，可以使用水平内边距、边框和外边距来调整它们的间距。
 
　　（3）浮动定位：（float，clear）
 
　　（4）相对定位（position：relative）
 
　　元素所占的空间不释放，元素框会相对于它原位置偏移某个距离。可以设置水平或者垂直位置，让元素相对于它的起点进行移动。
 
　　常用于照片的抖动效果。
 
　　（5）绝对定位（position：absolute）
 
　　将元素内容从当前定位中移出，并释放空间。
 
　　使用偏移属性来固定该元素的位置。位置 相对于最近的已定位（相对定位）祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（比如body元素）。
 
　　相对定位是相对于自身产生偏移，绝对定位是特殊的相对定位，相对于已定位的祖先元素产生偏移。
 
　　？常用于文字在图片的各种位置上显示。
 
　　（6）固定定位（position：fixed）
 
　　将元素内容固定到页面的某个位置。此时元素从普通流中完全移出，不占用页面的空间，且用户滚动页面时，元素框不会随着移动。
 
　　常用于“水印”的效果。与背景图片中的background-attachment: fixed；功能类似。
 
　　常用于“跳转效果”，即页面滚动，其一直显示在某处，点击会跳转到顶部。
 
　　（7）堆叠顺序（z-index）
 
　　一旦修改元素的定位方式，那么元素间可能存在堆叠情况。
 
　　使用z-index属性来控制元素框出现的重叠顺序。
 
　　常用于多个页面相互覆盖的情况，根据操作显示不同的页面。
 
　　（1）列表样式（list-style-type、list-style-image）
 
　　（2）cursor
 
　　默认情况下，光标会根据用户的操作发生改变，当鼠标悬停在一个链接上时，光标由指针形状改为手指形状。当鼠标悬停在文本区域时，光标由指针改为I形状。当鼠标悬停在一个按钮上时，光标会显示为箭头。
 
　　可以使用cursor属性指定鼠标的光标形状，以提示用户进行操作。cursor属性定义了鼠标指针放在某一个元素边界范围内时所用的光标形状。

客户端服务器浏览器数据库编程ServletJSP

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢