JavaWeb开发01 - HTML+CSS

最新推荐文章于 2024-09-13 19:58:50 发布

CV大法好

最新推荐文章于 2024-09-13 19:58:50 发布

阅读量935

点赞数 25

文章标签： java

本文链接：https://blog.csdn.net/gjw3037109961/article/details/142104631

版权

浏览器内核对前端代码进行渲染解析，为确保解析效果一直制定web标准。

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。层叠样式表
JavaScript：负责网页的行为（交互效果）。

什么是HTML ?

HTML: HyperText Markup Language，超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签构成的语言HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

HTML页面的基础结构标签

<html>

    <head>

        <title> </title>

   </head>

   <body>



   </body>

</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域。

HTML标签不区分大小写
HTML标签的属性值，采用单引号、双引号都可以

路径书写方式

绝对路径:

1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png

2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png

相对路径:

./ : 当前目录 , ./ 可以省略的

../: 上一级目录

CSS引入方式

具体有3种引入方式，语法如下表格所示：

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	<h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式	定义<style>标签，在标签内部定义css样式	<style> h1 {...} </style>
外联样式	定义<link>标签，通过href属性引入外部css文件	<link rel="stylesheet" href="css/news.css">

CSS选择器

，id选择器，class选择器，语法以及作用如下：

优先级: id选择器 >类选择器 >元素选择器

1.元素（标签）选择器：

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

元素名称 {

css样式名:css样式值；

}

2.id选择器:

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

#id属性值 {

css样式名:css样式值；

}

3.类选择器：

选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {

css样式名:css样式值；

}

正文排版实现中，还用到了几个CSS属性：

text-indent: 设置段落的首行缩进
line-height: 设置行高
text-align: 设置对齐方式, 可取值为 left / center / right

超链接标签: <a>

属性:
1. href: 指定资源访问的url
2. target: 指定在何处打开资源链接
  1. _self: 默认值，在当前页面打开
  2. _blank: 在空白页面打开

视频、音频标签

视频标签:

<video>

1. 属性:
  1. src: 规定视频的url
  2. controls: 显示播放控件
  3. width: 播放器的宽度
  4. height: 播放器的高度
音频标签:

<audio>

1. 属性:
  1. src: 规定音频的url
  2. controls: 显示播放控件

盒子模型

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

盒子的大小，其实就包括三个部分： border、padding、content。

布局标签<div> <span>

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签：

特点：
1. div标签：
  1. 一行只显示一个（独占一行）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高（width、height）width：70%；
2. span标签：
  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高（width、height）

表格标签<table>

<table> : 用于定义整个表格, 可以包裹多个 <tr>，常用属性如下：
1. border：规定表格边框的宽度
2. width：规定表格的宽度
3. cellspacing: 规定单元之间的空间
<tr> : 表格的行，可以包裹多个 <td>
<td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <th>

表单<form>

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签:

<form>

表单属性:
1. action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
2. method: 规定用于发送表单数据的方式，常见为： GET、POST。
  1. GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  2. POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签: 不同类型的input元素、下拉列表、文本域等。
1. input: 定义表单项，通过type属性控制输入形式
2. select: 定义下拉列表
3. textarea: 定义文本域

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。

用户名: <input type="text" name="username">

表单项

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

<input>: 表单项 , 通过type属性控制输入形式。

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

<select>: 定义下拉列表, <option> 定义列表项
<textarea>: 文本域