灯塔：JavaWeb笔记

什么是HTML、CSS?

HTML (HypeText Markup Lanage):超文本标记语言。

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

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

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

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

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

特点：

• HTML标签不区分大小写

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

• HTML语法松散

新闻排版-标题排版

图片标签：<img>

        src:指定图像的url(绝对路径/相对路径)

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

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

标题标签：<h1>-<h6>（重要程度依次减低）

水平标签：<hr>

. / :当前目录，. / 可省略

.. / :上一级目录 

标题样式

CSS引入方式：

• 行内样式：写在标签的style属性中（不推荐）

• 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

• 外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

颜色表示形式：

CSS选择器： 用来选择需要设置的样式（标签）

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

<span>标签

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

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

超链接标签：<a href=""></a>

属性：

href:指定资源访问的url

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

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

_blank：在空白页面打开

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

视频标签：<video>

• src:规定视频的url

• controls:显示播放控件

• width:播放器的宽度

• height:播放器的高度

音频标签：<audio>

• src:规定音频的url

• controls:显示播放控件

段落标签：<p>

文本加粗标签：<b>/<strong>

换行：<br>

段落：<p>

文本加粗：<b> <strong>

line-height:设置行高

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

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

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

盒子模型组成：

内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

页面布局：

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

标签:<div><span>

特点：

div标签：一行只显示一个（独占一行）

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高（width、height）

span标签：一行可以显示多个

宽度和高度默认由内容撑开

不可以设置宽高（width、height）

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

表格标签

<table>:定义表格

<tr>:定义表格中的行，一个<tr>表示一行

<th>:表示表头单元格，具有加粗居中的效果

<td>:表示普通单元格

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

标签:

 表单标签

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

标签：<form>

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

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

<select>:定义下拉列表

<textarea>:定义文本域

属性：

action:规定当提交表单时向何处发送表单数据，URL 如果不指定，默认提交到当前页面

method：规定用于发送表单数据的方式。GET（在url后面拼接表单数据，比如：？username=Tom&age=12，url长度有限制 默认值）、POST（在消息体中传递的，参数大小无限制）

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

表单标签-表单项

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

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

<textarea>:文本域