网页_HTML _JavaScript

来源：互联网发布：btsow新域名编辑：程序博客网时间：2024/06/07 03:03

1、day_01知识点梳理

     <!DOCTYPE html>
     HTML的版本声明

      HTML-------->XHTML1
       |
       |
       |
       |
       |
   HTML5
H5是应用最为广泛的一个标准。
<html></html> HTML页面中的根标记是唯一的
双标记：有头有尾

<head>：头标签
作用：设置网页的标题，设置网页内容的编码，引入资源(CSS,JS)

<title>:用于设置网页的标题
<meta>:用于设置网页内容的编码
单标签：有头无尾
charset="utf-8" //字符集
utf-8:国际化语言
GBK :中文字符集，简体中文，日文，朝鲜文
iso-8859-1:标准的英文字符集

<body></body>:网页中的大部分内容

标题元素：修饰文章标题。
语法：<h#></h#> #=1,2,3,4,5,6
      1--6 等级从高--低

段落元素：讲网页中的文本放在独立的段落中
语法：<p>文本内容</p>

<br/>:换行标记

<hr>:水平分割线。作用：区分不同类型的文本结构

HTML中的属性
语法：<标签名属性名=“属性值”></标签名>

width :长度
px:像素点不会根据浏览器的变化而改变
%：百分百根据浏览器的宽度不同，%的值会随之发生变化。

align:水平对齐方式
left:水平居左对齐
center:水平居中对齐
right：水平居右对齐

列表元素：

语法 <ol><li></li></ol> 有序列表
     <ul><li></li></ul> 无序列表
嵌套列表：
list-style:none; 去掉无序列表前的小符号（声明放在head头标签中）

行内元素：
<i></i>:使修饰的文本内容变成斜体
<b></b>:使修饰的文本内容加粗
<u></u>:使修饰的文本内容具有下划线

<sup></sup>:上角标
<sub></sub>:下角标

空格折叠：HTML中规定，一段文本中无论有多少个空格和换行，都当做一个处理

实体字符：解决空格折叠。如：&nbsp；标识空格。

<img /> :引入图片

属性：src="图片的路径 ";
alt:当图片无法加载的时候，显示默认文字。

超链接：
语法：<a href="跳转路径">文本内容</a>

表格：
<table>
<tr>:表示行
<td>:单元格
属性的优先级：td>tr>table
一列上的单元格之间相互影响
border 表示边框 1px是宽度 solid是实线
cellpadding: 文本元素和单元格之间的距离
cellspaceing:单元格和边框之间的距离
bgcolor:背景色
rowspan：合宾单元格跨行
colspan:跨列

day_02 知识点梳理
1、表单元素：用于浏览器和用户之间的交互。

text:——文本框 ;value 给文本框设置一个默认值
password:——密码框 value 给密码框设置一个默认值
radio:——单选框 name值相同为同一类别的单选框

checked ：——默认选中某个单选框
file:——上传文件
select:——下拉选
textarea:——文本域
button :表示普通功能的按钮。需要和JS结合使用。
submit:表示提交按钮，可以跳转到给定的url（action中的url）
reset:表示重置按钮，将浏览器的信息变成默认状态

CSS :层叠样式表，CSS中包含很多种样式，每一种样式，修饰HTML标记的一个方面。
通过多种样式结合在一起，才能勾勒出完整的HTML页面。
通过样式的叠加，形成完整的页面。

CSS的核心：样式，可以告诉浏览器，这个HTML标记应该显示成什么样子。

CSS中的语法规范：由两部分组成，选择器{声明}
选择器：在HTML页面上选择一个标记，让它成为CSS作用的目标
声明：告诉浏览器该标记的样式

CSS的引入方式：
1. 内联样式
直接在HTML标记中的style属性里写样式。
优点：简单，直观。
缺点：不易修改样式，耦合度高。
不建议使用
2. 内部样式
在<head>下写<style>标记，在<style>下写选择器和声明。
3. 外部样式
建立一个CSS样式文件,以.css为后缀。
在HTML的<head>中引入该样式文件
优点：将CSS代码放入样式文件中，可以减少HTML中代码量，
是的页面更加精简，可以增加代码的复用，减少代码的编写，降低了耦合度。

css样式文件
rel:表示引入的是什么资源
type：表示引入资源的类型
href：CSS样式文件的路径
<link rel="stylesheet" type="text/css" href="style.css">

CSS的特性：

1.继承性：作用在父辈元素上的CSS样式，可以被子元素所复用。

2.叠加性：若同一个HTML标记，同时存在多个CSS样式，不冲突的情况下，可以叠加使用。

3.优先级：若同一个HTML标记，同时存在多个CSS样式，在发生冲突的情况下，以优先级高的为准。

优先级之间的关系：高--低：内联样式--> 内部样式/外部样式 ---> 浏览器默认样式

当内部样式和外部样式同时存在，采用就近原则。

CSS的选择器

1. 元素选择器：通过HTML标记名来选择CSS作用的目标。
   作用范围非常大，通常不建议使用。
   在设置统一的样式时，可以使用。

2. 类选择器：选择HTML页面中的同一类标记。通过属性 class实现。

3.id选择器：选择HTML页面中唯一一个标记，通过属性 id实现。

4.选择器组：在HTML页面中选择一组选择器，其中包括类选择器
        id选择器，每个选择器所对应的标记都被作用上css样式

5.派生选择器：用于处理存在嵌套关系的标记元素。
1. 选择父元素下面的所有子孙元素
2.选择父元素下面的所有子元素

6.伪类选择器
hover 如：一点击照片照片的放大缩小

声明：
border:边框

四边同时设置边框
border: width值虚线/实线 color值

border-left:左边框
border-right:右边框
border-top:上边框
border-bottom:下边框

盒模型：实际意义是要告诉大家，我们在页面上看到的元素比它本身要大。

占用宽度：元素宽度+2*内边距+2*外边距
占用高度：元素高度+2*内边距+2*外边距
内边距：padding
外边距：margin

四边同时设置边距值
padding :width值；margin：width值

四边分开赋值规则：以瞬时间的顺序赋值
padding：n1 px n2 px n3 px n4 px ;
margin：n1 px n2 px n3 px n4 px ;

对边赋值方式：先上下后左右
padding:10px 20px;
margin:10px 20px;
当 margin的左右值为auto是，表示居中。

div:块级元素
排列方式：垂直排列
div本身没有高度，宽度相当于浏览器的宽度，它的大小是由其内部元素来支撑的。（自适应）
网站可以通过div进行多样布局格式

   -->

阅读全文

0 0