HTML&CSS学习总结 HTML 一.介绍

1.HTML是超文本标记语言（HyperText Markup Language）的缩写，使用它来架构一个网页最基本的内容和结构，在未使用css的情况下，HTML构建的网页只有“骨”。
2.HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。

二.标记 1.元素解释

*!*

如上所示
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

2.HTML结构

: 声明文档类型。出于历史原因需要，现在可有可无。
: 元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
: 元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
: 元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

3.注释

HTML以作为注释标记
例如

4.空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如
,

---

, , , 等等。我们称其为空元素，如下：

我可以
换行
 

5.属性

以 属性名称=“属性” 的形式，如下

6.标题

HTML 提供了从大到小6级标题，分别是： ~ ，如下所示：

This is heading 1
This is some text.

This is heading 2
This is some other text.

7.文本格式

特别标记

特别标记

删除

删除

不再准确或不再相关的内容

不再准确或不再相关的内容

文档的补充

文档的补充

下划线

下划线

小字体

小字体

粗体

粗体

斜体

斜体

提示：HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要CSS。

8.超链接

语法

百度一下

说明：
href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击。

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

某元素

超链接

注意：
元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号。

9.图片及文件路径

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

图片路径

该图片文件与当前文档在同一目录中

该图片文件在当前目录下的images目录中

该图片文件在上一级目录中

10.表格

表示行, 表示行中的单元, 是表头的单元（将会加粗显示）

11.列表

无序列表

无序列表使用

• 标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
  如

有序列表

有序列表使用

1. 标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

12.表单

当网站需要获取我们的一些信息时，我们就需要使用表单（form）来让用户填写或选择。

请输入如下代码进行学习：

  
  用户名：

  

  
  密码：

  

  年龄：

  
  

  
  性别：

   男

   女

   其它

  
  党派：

  
    民主党
    共和党
    无党派
  

  
  您有哪些交通工具：

   自行车

   摩托车

   轿车

   飞机

  
  您的工作日期：

  

  
  上传您的照片:

  

  
  您的建议：

      The cat was playing in the garden.
  

  
  
  

提示： 当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

13.显示

HTML 的元素可以以称为区块 或 内联的方式进行显示。

区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：,

, 
, ， 等。
区块元素
Hello
World
单独一行
内联元素
 内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： , , 
 
 
, , 等。
 
下面的元素将在一行中显示
aaaaa

111
bbbb

 
预设格式
 如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。
 

             

 
特殊字符
 在 HTML 中，某些字符是预留的。
 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
 

test.html
  <h1">>这是个一级标题</h1">>
  <p">>这是一个段落<p">>
 
CSS 
一.介绍 
CSS是级联样式表（Cascading Style Sheets）的缩写，用它来改变HTML页面的结构和样式，为网页充实“骨肉”。
 
二.样式 
1.元素解释 

p{
  color:red;
  text-align:center;  
}
 
选择器是您需要改变样式的对象（p）。
 每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值由冒号分隔。
 选择器
 
（1）id选择器 
#aa{
  color: blue;
}
 
（2）class选择器 
.center{
  text-align: center;
}
 
（3）元素选择器 
p{
  color:red;
  text-align:center;  
}
 
2.CSS位置 
（1）外部样式表 



  
  
  
  


  
111
  

  
2


 
在同一目录新建一个样式表文件mycss.css（注意后缀名为css）
 
（2）内部样式表 



  
  
  


  
111
  

  
2


 
（3）内联样式 
123
 
直接把样式规则直接写到要应用的元素中。
 
（4）优先级 
样式的优先级问题，从高到低分别是：
 内联样式
 内部样式表或外部样式表
 浏览器缺省样式
 
3.颜色，尺寸，对齐 
（1）颜色 
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。
 
#ff0000
 
（2）尺寸 
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
 
.example {
  width: 100%;
  height: 200px;
}
 
（3）对齐 
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可。
 
.example {
  text-align: center;
}
 
4.盒子模型 
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
 
box
 
说明：
 
Content 盒子的内容，如文本、图片等
 Padding 填充，也叫内边距，即内容和边框之间的区域
 Border 边框，默认不显示
 Margin 外边距，边框以外与其它元素的区域
 
 
如下
 
.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
 
一个元素真正占据的宽度应该是：
 左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
 因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。
 
5.边框和边距 
（1）边框 
.example-1 {
  border: 1px dotted black; 
}
.example-2 {
  border-bottom: 1px solid blue; 
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; 
}
.example-4 {
  border-left: 5px solid purple;
}
 
（2）边距 
padding: 20px; 
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; 
padding: 25px 10px; 
 
6.定位 
position属性用于对元素进行定位。该属性有以下一些值：
 
static 静态
 relative 相对
 fixed 固定
 absolute 绝对
 设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
 
（1）static 
设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
 即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
 
（2）relative 
设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
 试试如下的代码：
 
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}
 
（3）fixed 
设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
 此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
 如下的代码将会在浏览器右下角固定放置一个按钮元素：
 
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}
 
（4）absolute
 设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
 如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。
 
7.溢出 
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
 溢出属性有一下几个值：
 
visible 默认值，溢出部分不被裁剪，在区域外面显示
 hidden 裁剪溢出部分且不可见
 scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
 auto 裁剪溢出部分，视情况提供滚动条
 以上内容较好理解，请自行进行验证。
 关于滚动，我们还可以单独对上下或左右方向进行，如下代码所示：
 
.example-overflow-scroll-y {
  width: 200px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;
}
 
8.浮动 
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
 
.example-float-right {
      float: right;
    }
 
9.不透明度 
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
 值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：
 
img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity-2 {
      opacity: 0.2;
    }
 
10.组合选择器 
前面我们学习了 CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。
 下面我们介绍两种组合选择器。
 
后代选择器
 以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
 参见如下代码：
 


  


  

    
1
    
2
    
        
3
    
  
  
4
  
5


 
只作用于1，2，3
 
子选择器
 也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接
元素。
 参见如下代码：
 


  


  

    
1
    
2
    
        
3
    
  
  
4
  
5/p>


 
只作用于1，2。
 
11.伪类和伪元素 
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
 使用伪类/伪元素的语法如下：
 
 
selector:pseudo-class/pseudo-element {
  property:value;
}
 
以下是常用的伪类/伪元素的简单使用：
 
a:link {color:#FF0000;} 
 
p:hover {background-color: rgb(226, 43, 144);}
 
p:first-line{color:blue;} 
 
h1:before { content:url(smiley.gif); } 



转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/1007685.html


   上一篇  LeetCode精讲——1217.玩筹码（难度：简单）
 
   下一篇  SpringBoot2异常处理原理分析
  






Java相关栏目本月热门文章

  
1【Linux驱动开发】设备树详解（二）设备树语法详解
  
2别跟客户扯细节
  
3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  
4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  
5【分页】常见两种SpringBoot项目中分页技巧
  
6一文带你搞懂OAuth2.0
  
7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  
8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  
9JavaSE - 封装、static成员和内部类
  
10树莓派mjpg-streamer实现监控及拍照功能调试
  
11用c++写一个蓝屏代码
  
12从JDK8源码中看ArrayList和LinkedList的区别
  
13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  
14在openwrt使用C语言增加ubus接口（包含C uci操作）
  
15Spring 解决循环依赖
  
16SpringMVC——基于MVC架构的Spring框架
  
17Andy‘s First Dictionary C++ STL set应用
  
18动态内存管理
  
19我的创作纪念日
  
20Docker自定义镜像-Dockerfile







热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名







学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 






关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号