Web前端开发-HTM、CSS笔记

最新推荐文章于 2024-03-18 17:30:40 发布

m0_59904957

最新推荐文章于 2024-03-18 17:30:40 发布

阅读量151

点赞数

分类专栏： java web 文章标签：前端

本文链接：https://blog.csdn.net/m0_59904957/article/details/130290795

版权

java web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、初识Web前端

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

三个组成部分：

HTML：负责网页的结构（页面元素和内容）。

CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

JavaScript：负责网页的行为（交互效果）。

二、HTML

1.HTML概述

HTML（HyperText Markup Language）：超文本标记语言。

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

标记语言：由标签构成的语言。

HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

2.HTML快速入门

a.新建文本文件，后缀名改为 .html

b.编写 HTML 结构标签

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

    </body>
</html>

c.在<body>中填写内容

3.HTML的特点

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

4.基础标签

（1）图片标签：<img>

src：指定图像的url（绝对路径 / 相对路径）

width：图像的宽度（像素 / 相对于父元素的百分比）

height：图像的高度（像素 / 相对于父元素的百分比）

路径书写方式:

A.绝对路径:

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

b.绝对网络路径:

B.相对路径(推荐写法):

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

../ :上一级目录

（2）标题标签：<h1> - <h6>

h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。

（3）水平线标签：<hr>

（4）行标签：<span></span>

<span> 是一个在开发网页时大量会用到的没有语义的布局标签

特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

（5）超链接<a></a>

标签：<a href="..." target="...">央视网</a>

属性：

href：指定资源访问的url

target：指定在何处打开资源链接

_self：默认值，在当前页面打开

_blank：在空白页面打开

（6）视频标签<video></video>

src：规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度

（7）音频标签<audio></audio>

src：规定音频的url

control：显示播放控件

（8）段落标签：<p></p>

（9）文本加粗标签：<b></b>或者<strong></strong>

（10）文本倾斜标签：<i></i>

（11）文本添加下划线：<u></u>

（12）文本添加删除线：<s></s>

（13）表格标签<table></table>

标签	描述	属性/备注
<table>	定义表格整体，可以包裹多个 <tr>	border：规定表格边框的宽度
		width：规定表格的宽度
		cellspacing: 规定单元之间的空间。
<tr>	表格的行，可以包裹多个 <td>
<td>	表格单元格(普通)，可以包裹内容	如果是表头单元格，可以替换为 <th>

（14）表单标签<form></form>

表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。

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

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

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

select: 定义下拉列表
textarea: 定义文本域

二、CSS

1.CSS概述

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

2.CSS引入方式

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

3.颜色表示

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue...
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc