HTML和CSS

Web标准也称网页标准,由一系列的标准组成,大部分有W3C(World Wide Web Consortium,万维网联盟)负责制定。

三个组成部分:

  • HTML:负责网页的结构(页面元素和内容)。
  • CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
  • JavaScript:负责网页的行为(交互效果)。

什么是HTML、CSS?

HTML(Hyper Text Markup Language):超文本标记语言。

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

CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

用户手册W3school

标题排版

1.标题标签

  • 标签:<h1>...</h1>(h1 -> h6 重要程度依次降低)
  • 注意:HTML标签都是预定义好的,不能自己随意定义。

2.水平线标签<hr>

3.图片标签<img src="..." height="...">

  • 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
  • 相对路径:从当前文件开始查找。(./:当前目录,../:上级目录)

标题样式

1.CSS引入方式

  • 行内样式:<h1 style= "...">
  • 内嵌样式:<style>...</style>
  • 外联样式:xxx.css <link href="...">

2.颜色表示

  • 关键字:red、green、blue
  • rgb表示法:rgb(255,0,0)、rgb(134,100,89)
  • 十六进制:#ff0000、#cccccc、#ccc

3.颜色属性

color:设置文本内容的颜色

4.<span>标签

  • <span>是一个在开发网页时大量会用到的没有意义的布局标签
  • 特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

5.CSS选择器

  • 元素选择器:标签名
  • 类选择器:.class属性值
  • id选择器:#id属性值
  • 优先级:id选择器 > 类选择器 > 元素选择器
  • 注意:选择器后面的 { } 里面的语句应该带上分号

6.CSS属性

  • color:设置文本的颜色
  • font-size:字体大小(注意:记得加px)

超链接

1.超链接

标签:<a>

属性:

​ href:指定资源访问的url

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

​ _self:默认值,在当前页面打开

​ _blank:在空白页面打开

2.CSS属性

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

color:定义文本的颜色

正文排版

1.音频、视频标签

<audio> <video>

2.换行、段落标签

换行:<br>;段落:<p>

3.文本加粗标签

<b>(仅是加粗) <strong>(含有强调的意思)

4.CSS样式

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

5.注意

在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符:&nbsp;

页面布局

1.CSS盒子模型

组合:内容(content)、内边框(padding)、边框(border)、外边框(margin)

2.CSS属性

width:设置宽度

height:设置高度

border:设置边框的属性,如:1px solid #000;

padding:内边框

margin:外边框

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

表格标签

标签 描述 属性/备注
<table> 定义表格整体,可以包裹多个<tr> border:规定表格边框的宽度
width:规定表格的宽度
cellspacing:规定单元之间的内容
<tr> 表格的行,可以包裹多个<td> 表格有多少行就有多少个<tr>
<td> 表格单元格(普通),可以包裹内容 如果是表头单元格,可以替换为<th>
<th> 表示表头单元格,具有加粗居中的效果 只能用于表头第一行

表单标签

1.表单标签:<form>

2.表单属性:

action:表单数据提交的url地址

method:表单提交方式

  • get:表单数据拼接在url后面,?username=java,大小有限制
  • post:表单数据在请求体中携带,大小没有限制

注意:表单项必须有name属性才可以提交

表单项标签

  • <input>的type属性:text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit
  • <select>定义下拉列表
  • <textarea>定义文本域
posted @ 2024-04-04 21:18  JenckMin  阅读(3)  评论(0编辑  收藏  举报