JavaWeb--01.HTML

最新推荐文章于 2024-11-14 15:33:48 发布

GZK.

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量68

点赞数 1

文章标签： html web java vscode

本文链接：https://blog.csdn.net/gzkyyds/article/details/133833405

版权

HTML

1. HTML快速入门

1.1 HTML结构标签

<html>
	<head>    
		   <title>标题</title>
	</head>
	<body>
    
	</body>
</html>

1.2 特点

HTML标签不区分大小写
HTML标签属性值单双引号都行
HTML语法松散

2. 基础标签 & 样式

2.1 新浪新闻-标题

2.1.1 标题排版

图片标签：
1. src：指定图像的url（绝对路径/相对路径）
2. width：图像的宽度（像素 / 相对于父元素的百分比）
3. height：图像的高度（像素 / 相对于父元素的百分比）
标题标签：
-
水平线标签：

2.1.2 标题样式

CSSl引入方式：
1. 行内样式：写在标签的style属性中（不推荐）
2. 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
3. 外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）
颜色表示形式：

在这里插入图片描述

CSS选择器(用来选取需要设置样式的元素(标签))
小结：
1. 标签
  - 是一个在开发网页时会大量用到的没有语义的布局标签
```
<span class="cls" id="time">2023年03月02日</span> <span>央视网</span>
```
  - 特点：一行可以显示多个（组合行内的元素），宽度和高度默认由内容展开
2. CSS选择器
  - 元素选择器：标签名 { … }
  - id选择器：#id属性值 { … }
  - 类选择器：.class属性值 { … }
  - 优先级：id选择器 > 类选择器 > 元素选择器
3. CSS属性
  - color：设置文本的颜色
  - font-size：字体大小（注意：记得加px）

2.1.3 超链接

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

text-decoration：规定添加到文本的修饰，none表示定义标准的文本。

color：定义文本的颜色

2.2 新浪新闻-正文

2.2.1 正文排版

视频标签：

src：规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度
音频标签：

src：规定音频的url

controls：显示播放控件
段落标签：
文本加粗标签: /

ps：在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：

2.2.2 页面布局

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

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

注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …

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

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

3. 表格、表单标签

3.1 表格标签

场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。
标签：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<table>：定义表格
<tr>：定义表格中的行，一个 <tr> 表示一行
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格

3.2 表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
标签：

表单项：不同类型的 input 元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式

<select>：定义下拉列表

<textarea>：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL

method：规定用于发送表单数据的方式。GET、POST

小结：

表单标签：<form>    
表单属性:
action：表单数据提交的url地址
method：表单提交方式

表单标签-表单项：

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

<select>：定义下拉列表，<option> 定义列表项。

<textarea>：文本域

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

小结：

<input> 的type属性：text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit
<select> 定义下拉列表
<textarea> 定义文本域

：定义下拉列表，定义列表项。

：文本域 ``` [外链图片转存中...(img-q1qU6lWL-1697293982931)] 小结： ```html 的type属性：text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit 定义下拉列表定义文本域 ```