HTML和CSS

合集 - JavaWeb(22)

1.Web开发2023-07-15

2.HTML和CSS2023-07-15

3.JavaScript2023-07-174.Vue2023-07-175.Ajax2023-07-186.前端工程化2023-07-187.Element2023-07-188.Maven2023-07-199.HTTP2023-07-1910.Tomcat2023-07-1911.请求响应2023-07-2012.分层解耦2023-07-2013.MySQL2023-07-2214.Mybatis2023-07-2415.文件上传2023-07-2516.配置文件2023-07-2617.会话技术2023-07-2718.过滤器与拦截器2023-07-2719.异常处理与事务管理2023-07-2720.AOP2023-07-2821.bean的管理2023-07-2822.自动配置2023-07-31

收起

一、HTML

1.HTML ( HyperText Markup Language) :

​ 超文本标记语言。

2.超文本:

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

3.标记语言:

​ 由标签构成的语言。

（1）HTML标签都是预定义好的；

（2）HTML直接在浏览器中运行，HTML标签由浏览器解析。

4.结构标签：

5.HTML特点：

（1）HTML标签不区分大小写；

（2）HTML标签属性值单双引号都可以；

（3）HTML语法松散。

6.标题标签：

（1）标签: <h1>...</ h1> (h1 → h6重要程度依次降低);

（2）注意:HTML标签都是预定义好的，不能自己随意定义。

7.水平线标签：

​ <hr>

8.图片标签：

​ <img src="..." width="..." height="...">

（1）绝对路径:绝对磁盘路径（D:/xxxx)、绝对网络路径( https : / /xxxx)；

（2）相对路径:从当前文件开始查找。(./ :当前目录，../ :上级目录)。

9.布局标签：

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

（2）标签:

​ <div> <span>

（3）特点:

• div标签:

  ​ 一行只显示一个（独占一行)；

  ​ 宽度默认是父元素的宽度，高度默认由内容撑开可以设置宽高（ width、height)。

• span标签:

  ​ 一行可以显示多个；

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

  ​ 不可以设置宽高（ width、height)。

10.超链接：

（1）标签:

​ <a>

（2）属性:

• href:指定资源访问的url

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

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

  ​ _blank:在空白页面打开

11.视频标签：

（1）标签：

​ <video>

（2）属性：

• src:规定视频的url；

• controls:显示播放控件；

• width:播放器的宽度；

• height:播放器的高度。

12.音频标签：

（1）标签：

​ <audio>

（2）属性：

• src:规定音频的url；

• controls:显示播放控件。

13.段落标签:

​ <p>

14.文本加粗标签:

​ <b> / <strong>

15.换行标签：

​ <br>

16.表格标签：

（1）场景:

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

（2）标签：

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

17.表单标签：

（1）场景:

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

（2）标签:

​ <form>

（3）表单项:

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

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

  

• <select>:定义下拉列表;

• <option>定义列表项；

• <textarea>:定义文本域。

（4）属性:

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

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

  ​ get:表单数据拼接在url后面，?username=java ,大小有限制；

  ​ post:表单数据在请求体中携带，大小没有限制；

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

18：注意：

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

二、CSS

1.CSS（Cascading Style Sheet）：

​ 层叠样式表，用于控制页面的样式（表现）。

2.CSS引入方式：

（1）行内样式: <h1 style="...">；

（2）内嵌样式:<style> ... </style>；

（3）外联样式:xxx.csS <link href="...">。

3.颜色表示：

（1）关键字:red、gree . . .；

（2）rgb表示法:rgb(255,e,e)、rgb(134,100, 89)；

（3）十六进制:#ffe00e、#cccccc、#ccc。

4.CSS选择器：

（1）元素选择器:标签名{ ... }；

（2）id选择器:#id属性值{ ... }；

（3）类选择器:.class属性值{ ... }；

（4）优先级: id选择器>类选择器>元素选择器。

5.css属性：

（1）color:设置文本的颜色；

（2）font-size:字体大小（注意:记得加px)：

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

（4）line-height:设置行高；

（5）text-indent:定义第一个行内容的缩进；

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

6.CSS盒子模型：

（1）组成:

​ 内容(content)、内边距(padding)、边框(border)、外边距( margin)。

（2）CSS属性

• width:设置宽度；
• height:设置高度；
• border:设置边框的属性，如:1px solid #000;
• padding:内边距；
• margin:外边距；
• 注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如: padding-top.padding-left、padding-right....