html基础知识笔记

HTML基础

1.1HTML文件的基本结构和W3C标准

1.1.1HTML简介

HTML是一种描述网页的语言,一种超文本标记的语言!

1.1.2HTML文件的基本结构

  • 头部(head)

    头部是网页的标题等基本信息

  • 主体(body)

    主题包括网页的内容信息

注意标签必须成对出现

1.2网页的基本标签

每个标签都有一对尖括号,此处省略

    1. 标题标签

h1 h2 h3 h4 h5 h6 (字体样式依次变小)

    1. 段落和换行标签

p  br

    1. 水平线标签

hr: 表示能产生一条水平线

    1. 字体样式标签

strong:能对字体进行加粗

em:能对字体进行倾斜处理

    1. 注释和特殊符号

注释:!--内容--

特殊符号:

      • 空格:
      • 大于号:>
      • 小于号:&Lt
      • 引号:"
      • 版权符号:?

1.3图像标签

语法:<img src="图片地址" alt="图像代替文字" title="鼠标悬浮的文字" width=“图像宽度” height="图像高度">

1.4链接标签

  • 超链接的基本用法

    <a href="链接地址" target ="目标窗口的位置" >链接的文本或图像</a>

  • 超链接的应用场合
    1. 页面间链接
    2. 锚链接
    3. 功能性链接

列表 表格 框架

2.1列表

  1. 无序列表

    无序列表是一个项目列表使用项目符号标记无序列表。没有等级之分

    无序列表由: ul 和 li 组成

  2. 有序列表

    有序列表时由一个个列表组成,列表项由数字或字母组成

    有序列表由:ol 和 li 组成

  3. 定义列表

    定义列表是项目和注释的组合

    定义列表由:dl dt dd组成

2.2表格

  • 为什么使用表格

    简单通用

    结构稳定

  • 表格的基本结构

    单元格:表格的最小单元

    行:一个或多个单元格横向堆叠而成

    列:单元格的纵向排列

  • 表格的基本语法
    1. 表格标签:table
    2. 行标签(可以有多行):tr
    3. 列标签(可以有多个单元格):td
  • 表格的对齐方式
    • 水平方向

      • 左对齐:align=“left”
      • 右对齐:align=“right”
      • 居中对齐:align=“center”
    • 垂直方向
      • 顶端对齐:valign="top"
      • 下端对齐:valign="bottom"
      • 居中端对齐:valign="middle"
      • 基线端对齐:valign="baseline"

2.3框架

表单

3.1表单

    • 表单的标签和属性

form标签来实现表单 input标签是辅助form的一个标签设定各种输入

form的属性值:

      • action:表示提交的地址,如果为空,表示本页
      • method
        • 服务器发送数据的方法:post/get
        • post:表单上的数据作为数据块发送,不适用请求字符型 get:浏览器会创建一个请求,会返回指定的脚本
    表单元素和格式

    • 文本框(text)

      例:<input type="text" name="fname">

    • 密码框(password)

      例:<input type="password" name="fname">
    • 单选按钮(redio)

      例:<input type="redio" >
    • 复选框(checkbox)

      例:<input type="checkboc" >
    • 列表框(selected option)

      例: <seleceted> <option value="内容"></option> </selected>
    • 按钮
    • submit提交按钮

      点击.内容会提交
    • reset重置

      点击此按钮,实现重置
    • bottom普通
    • 多行文本域

      语法:<input type=”image“ src=”images/login.jpg“>
    • 文件域

      实现文件的选择

      语法:<input type="file" name="files">

3.2表单的高级应用

    • 设置表单的隐藏域

将type的值设置成hidden时,这时就可以隐藏文件的隐藏

  • 表单的只读和禁用设置
    • 只读场景:网站服务器不希望用户修改数据,这些数据在表单元素中显示。(属性设置readonly=“readonly“)
    • 只有满足这个条件时,才能使用此功能。(disabled=“disabled”)

3.3语义化的表单

    • 关于语义化

语义化:达到结构简单,代码简单。

    • 语义化表单

fieldest:这标签实现域的定义。把元素放到这个标签内时,浏览器就会以特殊的方式显示出来,这些表单就可能有一个边界。

      • 域标题

legend:标签就是给域设置的一个标题,

    • 通常是这两个标签结合着使用。实现语意话表单
  • 表单元素的注释
    • 定义:使用一个标签对内容注释了,当用户点击此内容时,浏览器会自动聚焦到相应的表单元素上。
    • 语法:<label for=”表单元素的id“>标注的文本</label>
    • 注意:需要在输入的input标签中定义属性:id 并赋值

初识CSS

4.1使用css的意义

    • 什么是CSS

全称:层叠样式表,又称风格样式表,它是用来网页设计的,使网页漂亮,清晰!!

    • CSS在网站中的应用

可以设置字体的样式,大小,颜色,可以使图像,文本居中,超链接不同的效果,美化网页

  • CSS的优势

    1. 内容与表现分离。可以用css样式独占一个文件(便于维护)
    2. 表现统一
    3. 具有丰富的样式
    4. 减少网页的代码量
    5. 运用独立的css,便于搜索引擎收录

4.2css的基本语法

    1. css的基本语法结构

      css由两部分组成,即选择器和声明,声明必须放在大括号中,可以是多条,每条声明由属性和值组成,属性和值用冒号隔开,语句以英文分好结束。

      语法:选择器{属性:值;}

    2. 认识<style标签>

STYLE标签是引入css样式的标签。此标签位于head标签中还要给此标签的头部属性赋值:type=”text/css“

  1. css的选择器
    • 标签选择器

      • 所有的标签都可以使用标签选择器

        语法:标签{属性:值;}

    • 类选择器
      1. 当希望某个段落是另一种情况时,就最好引入类选择器
      2. 语法:.类名{属性:值;}
    • ID选择器
      1. 当页面只需要使用一次时,选择id选择器!
      2. 语法:#id的名称{属性:值;}

4.3在HTML中引入css样式

  • 行内样式

    就是在html中的标签直接使用

    没有实现内容与表现分离,没有体现css得到优势(不推荐使用)

  • 内部样式

    把css的代码直接写在head的style标签中,与html的文件位于通一个文件中
  • 外部样式

    单独创建一个css后缀的文件名,然后使用的时候直接通过链接式或导入式

    1. 链接外部样式表

      必须在html的文件中使用link标签才能链接

      语法:<link href="css/文件名.css" rel="stylesheet" type="text/css"/>

    2. 导入外部样式

      <style type="text/css">

      [email protected] url("style.css");--

  • 样式的优先级
    • 行内样式>类部样式>外部样式
    • ID选择器>类选择器>标签选择器

4.4css的高级应用

  • css复合选择器

    1. 后代选择器

      后代选择器就是把外层的标签写在前面,内层的写在里面,之间用空格分离。当标签发生嵌套时,内层就是外层的后代。

      按标签进行嵌套

      按选择器进行嵌套

      3种互相嵌套

    2. 交集选择器

      交集选择器是由两个选择器直接构成的,其结果是选中二则各自元素范围的交集。其中第一个必须是标签选择器,第二个必须是类选择器或者ID选择器。两个之间不能有空格,必须连续书写

      这种方式构成的选择器,将选中同时满足的两则定义的元素。也就是前者所定义的标签选择器,并且制定了后者的类型或者ID元素。

    3. 并集选择器

      同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。

      并集选择器是由多个选择器通过逗号链接而成的。

  • css的继承特性
    • 继承的关系

      所有的css都是由各个标签之间继承关系的。可以称之为父子关系

    • 继承的应用

      css继承子标签都会继承父标签的样式,风格,可以在父标签样式风格的基础上修改,产生新的样式,而子标签不会影响父标签

CSS美化网页元素

5.1使用css编辑网页文本

  1. 文本在网页中的意义

    • 有效的传递页面信息
    • 使用css美化过的页面文本,是页面漂亮美观
    • 可以很好的突出页面主题
    • 具有良好的用户体验
  2. <span标签>

    为了突出文字或语句,就得使用span标签  <span></span>
  3. 字体的样式

    font-family
    font-size
    font-style
    font-weight
    font

    设置字体的类型
    设置字体的大小
    设置字体的风格
    设置字体的粗细
    在一个声明中同时进行

  4. 使用css网页排版文本

    color
    text-align
    text-indent
    line-height
    text-decoration

    设置文本的颜色
    设置元素水平对齐方式
    设置首行文本缩进
    设置文本的行高
    设置文本的装饰

5.2使用css设置超链接

    • 超链接伪类

      a{属性:值;}

      a:hover{属性:值;}

    • 使用css设置鼠标形状

default
pointer
wait
help
text
crosshair

默认光标
超链接指针
指示程序正在忙
指示可用的帮忙
指示文本
鼠标呈现十字状

5.3背景的样式

  • 认识<div>标签

    div可以把html文档分割成独立的,不同的部分,是用来进行网页布局

    <div>网页内容</div>

  • 背景属性
    1. 背景颜色
    2. 背景图像
      1. 背景图像 background-image:url(图像地址);
      2. 背景重复方式
        1. repeat:沿水平和垂直方向平铺
        2. no-repeat:不平铺
        3. repeat-x:沿水平方向平铺
        4. repeat-y:沿垂直方向平铺
    3. 背景

      直接使用background:来给属性赋值;
  • 设置超链接背景

5.4列表的样式

  • list-style-type列表标记类型
    1. none:无标记符号
    2. disc:实心圆,默认类型
    3. circle:空心圆
    4. square:实心正方形
    5. decimal:数字
  • list-style-image使用图像代替列表项标记 list-style-image:url(图片地址);
  • list-style-position设置在何处放标记;

    这个属性有两个值:inside和outside
  • list-style:统一设置列表的样式,直接加属性值就行!!

第六章:盒子模型

6.1盒子模型

    1. 6.1.1什么是盒子模型

      div与盒子有一定的距离,这些距离与div构成了盒子模型的结构!盒子模型具有属性:内边距,外边距,边框

      边框:相当于盒子的纸盒,一般具有一定的厚度!

      内边距:位于边框内部,是内容与边框的距离!

      外边距:位于边框外部,是边框与周围的间隙

    2. 6.1.2边距

      具有三个属性:color width style

      设置方法:border-color: border-width: border-style:

      一般统一设置:border:color(颜色) width(宽度 ) style(类型/solid/dashed):代表设置四边的颜色-类型-宽度一样

      如果要分别设置:就是border-top-color: border-top-width: border-top-style: 依次类推

    3. 6.1.3外边距

定义:与其他盒子之间的距离。也就是指网页元素与元素的距离

常见的方法有:margin-top:z设置上外边距

常见的方法有:margin-right设置下外边距

常见的方法有:margin-left:设置左外边距

常见的方法有:margin-right:设置右外边距

合并:margin:?px;

margin:?px ?px;

    1. 6.1.4内边距

定义:内容与边框之间的距离,以便精确的控制内容的位置

padding-top:上内边距

padding-bottom:下内边距

padding-left:左内边距

padding-right:右内边距

    1. 6.1.5盒子模型的尺寸

盒子模型的尺寸:内边距+外边距+边框的宽度+内容的宽度

6.2标准文档流

    1. 标准文档流

组成:标准文档流:块级元素和内联元素组成!

块级元素:每一个元素都独占一个矩形区域,左右撑满,并且相邻的元素会想竖子方向排列。

内联元素:内容会横向排列,不会独占一个矩形区域。到最有端自动换行!!

    1. display属性
block: 默认为块级元素,会带有换行符
inline: 内联元素:默认没有换行符
none: 设置元素不显示

第七章:浮动

7.1网页布局

网页布局分为多种:最常见的有3种

7.2浮动

    1. 浮动在网页中的应用

      可以实现全局布局:可以对导航条,内容,标题进行布局。使用float属性!

    2. float属性
left 元素向左浮动
right 元素向右浮动
none: 元素不浮动

例:float : left

7.3清楚浮动

    1. 清楚浮动影响
left 清楚左浮动
right 清楚右浮动
both 清楚左,右浮动
    1. 扩展盒子模型

在所有div盒子的后面加一个div

css那边设置{clear:both margin:0px padding:0px}

7.4溢出问题

    1. overflow属性

解决内容溢出后的处理

visible: 默认值,内容不会被修剪,会呈现在盒子外面
hidden: 内容超出会被修剪,其余部分不看见
scroll 内容会被加上滚东条,会被修剪
auto 如果被修剪会出现滚动条(自动)
    1. overflow属性的妙用

      扩展盒子的高度:这样盒子就会被撑开

      例:overflow:hidden:

时间: 2024-10-12 03:32:38

html基础知识笔记的相关文章

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

网络连接相关基础知识笔记

一.常说的TCP/IP的含义 TCP/IP协议簇并不仅仅指TCP协议和IP协议,实际它包括了一系列协议组成的集合,如:TCP,IP,UDP,FTP,SMTP,DNS,ARP,PPP等 TCP与UDP协议都属于传输层协议,但有很大不同,TCP是面向连接的协议,提供的是可靠的数据流服务,TCP采用"带重传的肯定确认"机制来实现传输的可靠性,实现了一种"虚电路",因为从物理上来说,并不是真正在两台主机间建立了连接,这种连接只是存在于逻辑上的.最大的开销出现在通信前建立连接

Oracle基础知识笔记(10) 约束

大清早打开vs2008,出现这么诡异的错, 删了一个dll的就好了.如图 Oracle基础知识笔记(10) 约束

Oracle基础知识笔记(11) 建表、更新、查询综合练习

有某个学生运动会比赛信息的数据库,保存了如下的表: 运动员sporter(运动员编号sporterid,运动员姓名name,运动员性别sex,所属系号department) 项目item(项目编号itemid,项目名称itemname,项目比赛地点location) 成绩grade(运动员编号id,项目编号itemid,积分mark) 请用SQL语句完成如下功能: 1.  建表,并在相应字段上增加约束: 定义各个表的主键和外键约束: 运动员的姓名和所属系别不能为空: 积分要第为空值,要么为6,4

unity基础知识笔记一(快捷方式、基础概念)

快捷方式: 飞行模式,可以用alt+wasd ,切换,实现用户以第一视角在场景漫游 alt+鼠标左键:围着关注点旋绕 :切换天空盒.雾效,光晕的显示与隐藏. ctrl+6:可以弹出animation视图 基础概念: Mesh Filter:网格过滤器用于从对象中获取网格信息(Mesh)并将其传递到用于将其渲染至屏幕的网格渲染器当中 Mesh Collider:Mesh碰撞体,为了防止物体被穿透,需要给对象添加碰撞体 Mesh Renderer:网格渲染器从网格过滤器获得几何形状,并且根据Tran

初学MySQL基础知识笔记--第一天

本人初入博客园,第一次写博客,在今后的时间里会一点点的提高自己博客的水平,以及博客的排版等. 在今天,我学习了一下MySQL数据库的基本知识,相信关于MySQL的资料网上会有很多,所以我就不在这里复制粘贴了,在这里留下一些本人在初学MySQL时的一些笔记,以供有需要的同学来参考.以下内容绝无复制,仅仅是博主自己的一些总结. 字段类型 数字:int,decimal(小数) eg:decimal(5,2):一共包含5位数,小数部分有2位 字符:char(存的字符是固定的),varchar(存的字符是

计算机网络基础知识笔记(三)

无分类编址CIDR(Classless Inter-Domain Routing,构造超网) 背景:在1992年因特网仍然面临三个必须尽早解决的问题,这就是:B类地址在1992年已分配了近一半,眼看就要在1994年3月全部分配完毕!因特网主干网上的路由表中的项目数急剧增长(从几千个增长到几万个). 整个 IPv4 的地址空间最终将全部耗尽. 1987年,RFC1009就指明了在一个划分子网的网络中可同时使用几个不同的子网掩码.使用变长子网掩码VLSM(Variable Length Subnet

存储基础知识笔记

DAS.NAS.SAN是三种存储模式,NAS与SAN都是在DAS的基础上发展起来的,是新型数据存储模式中的两个主要发展方向. DAS是大型服务器采用的主要存储方式,DAS(Direct Attached Storage,直接外挂存储) NAS(Network Attached Storage,网络附加存储) SAN(Storage Area Network,存储域网络) 直接连接存储(Direct Attached Storage,简称DAS),是通常放置在服务器机箱内部的驱动器,通常是SCSI

Java基础知识笔记(一:修饰词、向量、哈希表)

一.Java语言的特点(养成经常查看Java在线帮助文档的习惯) (1)简单性:Java语言是在C和C++计算机语言的基础上进行简化和改进的一种新型计算机语言.它去掉了C和C++最难正确应用的指针和最难理解的多重继承技术等内容,通过垃圾回收机制简化了程序内存管理,统一了各种数据类型在不同操作系统平台上所占用的内存大小. (2)网络特性:Java语言是目前对网络支持最全面,与网络关系最密切的计算机语言之一. (3)面向对象:由于Java语言是一种新型计算机语言,没有兼容过程式计算机语言的负担,因此