Web前端基础HTML、CSS

最新推荐文章于 2024-07-16 17:18:30 发布

Tmengxing

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量591

点赞数

文章标签： css html java

本文链接：https://blog.csdn.net/Tmengxing/article/details/105400623

版权

在大前端中所包括的几大块 web(网页)、移动互联(android ios即 app)、公众号/小程序(嵌入到第三方框架的app)、其他硬件设备/大屏等等。主要是数据显示和数据收集(查询字符串、json字符串)。
所谓前后端分离开发：
   1.所有的程序都是以数据为基础，没有数据的程序没有实际意义，对数据进行增删改查。
   2.前后端分离就是把数据操作和显示分离出来。前端专注做数据显示，通过文字，图片或者图标等方式让数据直观的显示出来。后端做数据的操作。前端把数据发给后端，有后端对数据进行修改。
   3.后端一般用java，c#等语言，后端来进行数据库的链接，并对数据进行操作。
   4.后端提供接口给前端调用，来触发后端对数据的操作。

前后台项目过程
前台:编写代码 --> 运行测试 --> 交付(部署)
   1)部署到tomcat中(动态服务器):tomcat/webapps/
   2)部署在静态服务器apache/nginx）
后台:编写代码 -> 编译代码 ->测试 -> 打包（jar/war）
对于springBoot中写完的代码进行打包部署:
   1)war包可以抛给tomcat/webapps,war就能自动进行解压
    2)jar包直接就可以允许了，因为内置了tomcat服务器

网页三要素:
   html :是网页的骨架，用块、行、table/form 标签组成
   css :包括页面装饰、布局、动画过渡效果。使用原则:对于动画效果能用css实现的绝对不用js。
   js : JavaScript，使用动态DOM操作，类似于jstl,用于与后台数据交互。

HTML:
html是超文本标记语言，超级文本内容包括文本、超级链接、图片，视频，音频等等。html属于解释性语言，在浏览器中运行，它的语法是由w3c网页编程标准制定的，所以和java不同，java是隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的，当java进行语法升级时，jvm和效果等等都会进行升级，而html从h4升为h5，升级了语法，但是不同的浏览器有不同的展示效果，并不是统一的，只是使用了一套标准进行编写而已。

1.环境搭建
1)编辑器环境
轻量级的编辑
sublime(需要emmet插件)
vscode
2)浏览器环境:测试
firefox
google chrome
opera
safari
ie8+ 兼容性

2.html结构
1).html由各种元素组成，一个元素通常包含开始标签，结束标签，在开始标签中可以添加属性
2).HTML5的doctype声明:

<!DOCTYPE html>

3).Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则
HTML5的doctype声明:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

4).xml和html之间区别：
xml:可扩展标记语言，在xml中的标签是可以自定义的
html:所有的标签都是内置的，就是固定的

5).html的主体结构：

<html>
   <head>
	<!--源信息  该行表示html告诉浏览器，告诉浏览器使用指定的字符编码进行解码-->
	<meta charset="UTF-8">
   </head>
   <body>
	<!--可以显示在网页中的内容-->
   </body>
</html>

注:编写html时，不要瞎写，通常需要在网页上显示的内容是在 body 中进行编写，不允许在 head 中进行编写。但如果在 head 中写了的话浏览器会进行语法纠错的，也是可以显示出来的，但还是推荐按照标准编写方式进行编写。

6)属性
核心属性:id、title、style、class 是绝大多数元素都具备的属性
特有属性: 元素a中 href、target;元素img中 src、width、height

4.标签
我们学习标签主要学习的是标签的语义，而非样式，比如 h1 标题标签，如果将该标签的样式重置，那么它的效果适合没有任何样式的div标签是一样的效果，所以当我们使用时是通过每个标签的语义来进行使用的，而不是看其显示的样式。
标签可以分为块级标签和行级标签:
1)块级标签
作用：主要是搭建网页整体架构的。
特点：宽度默认占满父元素，高度默认由内容决定，宽高是可以自定义的。
块级标签:
div (属于无意义的块元素，当不知道用哪一个块级标签时可以使用此标签，所谓无招胜有招)
h1~h6 标题
p 段落
ul>li 列表
ol>li 列表
dl>dd,dt 列表
2)行级标签
作用：用于填充网页，即内容的显示。
特点：宽高默认是由内容决定的，且不能自定义，所有行级元素可以共享一行空间。
行级标签:
span(无意义的行内元素)
img 图片特殊的块级标签，有width和height来定义宽高
src
alt 当图片找不到的时候呢使用文本替代
strong b em i sub sup d …
a 超链接三种跳转方式:

<!--  _blank表示新建一个窗口进行展示  -->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!-- 锚点跳转 -->
<a href="#introduce">介绍</a>
<a href="#history">履历</a>
<!-- javascript:void(0) 阻止默认跳转，鼠标点击没有作用 -->
<a href="javascript:void(0)">跳转</a>

注：行内元素一般不允许嵌套子元素，只允许放文本。行级标签嵌套在块级便签内部，不允许反过来嵌套。

CSS:
1.在html中使用css样式(3种方式)
1)在标签内部嵌入

<p style="color:red;"></p>

  缺点：将css代码写在html中，比较混乱;该样式复用性较低
  优点：优先级高，简单直接
  2)集中嵌入在style标签中

<style>
	div{
		font-size:24px;
	}
</style>

3)独立写在外部css文件中，通过link导入

<link href="style.css">

2.css选择器
1)核心选择器:选择比较大的范围
标签选择器: 标签名{…}
id选择器 : #{…} 以 # 开头进行选择
class选择器：.class名字{…}
并且选择器：div.three{…} : 选中的是标签为div且class为three的标签
或者选择器：div, .first{…} : 选中的是所有的div和所有的class为first的标签
普遍选择器： *{…} 所有的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
<style>
    div{
        background-color: powderblue;
    }
    #test2{
        color: red;
    }
    .test3{
        font-size: 20px;
    }
    li.jack2{
        background-color: yellow;
        font-family: "楷体";
        border: 2px solid black;
    }
    .susan,#jack{
        color: coral;
    }
    input[name=username]{
                border: 2px solid red;
    }
    /*
    *{
        color: red;
    }
    */
</style>
</head>
<body>
    <form action="">
        用户名<input type="text" name="username"><br>
        密码<input type="password" name="password" ><br>
        介绍<textarea name="description" id="" cols="30" rows="10"></textarea>
    </form>
    <ul>
        <li class="susan">或者选择器</li>
        <li id="jack">jack</li>
        <li id="tom">tom</li>
    </ul>
    <ol>
        <li id="susan2">并且选择器</li>
        <li class="jack2">jack2</li>
        <li id="tom2">tom2</li>
    </ol>
    <span class="test3">class选择器</span><br>
    <span id="test2">id选择器</span>
    <div>标签选择器</div>
</body>
</html>

2)层次选择器
子代选择器(>)：.top_nav > ul > li 选中class为top_nav的元素的直接后代ul元素的直接后代li元素
后代选择器(空格): .top_nav li 选中class为top_nav的元素的所有后代li元素
下一个兄弟选择器: .top_nav li + *
之后所有兄弟选择器: .top_nav li ~ *

3)过滤器
1. 属性过滤器
selector[name] 已选择到的元素具有name属性
selector[name=v] 已选择到的元素具有name属性，并且name属性的值为v
selector[name^=v] 已选择到的元素具有name属性，并且name属性的值以’v’开头
selector[name$=v] 已选择到的元素具有name属性，并且name属性的值以’v’结尾
selector[name*=v] 已选择到的元素具有name属性，并且name属性的值中包含了’v’
2. 伪类过滤器以:开头进行选择

<ul>
	<li>one</li>
	<li>two</li>
	<li>three</li>
</ul>

selector:first-child 过滤出已选择元素中的是第一个孩子的元素
         例：ul>li:first-child 表示在ul下已选择直接li元素中，选择第一个 li 标签
selector:last-child    在已选择元素中选择最后一个
selector:nth-child(2)    已选择元素中的第2个孩子元素
selector:nth-child(even)    过滤出偶数索引
selector:nth-child(odd)     过滤出奇数索引
selector:nth-child(3n+1)
selector:only-child
selector:not(selector)
…
selector:hover ：鼠标移到上面
selector:active
selector:visited
selector:focus

伪元素过滤器
可以产生出来一个虚拟元素（行内元素）,以::开头的
div::before {…}
div::after {…}
```
 <div>
 	::before
 	<p>one</p>
 	<p>two</p>
 	::after
 </div>
```

————————
未完，后续再接上…

Tmengxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端基础HTML、CSS

大前端包括 web(网页)、移动互联(android ios即 app)、公众号/小程序(嵌入到第三方框架的app)、其他硬件设备/大屏。进行数据显示和数据收集(查询字符串、json字符串)。前后端分离开发：1.所有的程序都是以数据为基础，没有数据的程序没有实际意义，对数据进行增删改查。2.前后端分离就是把数据操作和显示分离出来。前端专注做数据显示，通过文字，图片或者图标等方式让数据直观的...
复制链接

扫一扫