尚硅谷JavaWeb笔记——HTML、CSS（后端补充前端知识，这些就够了）

快来打我* 2022-11-01 10:51 97阅读 0赞

### 文章目录 ###

*  HTML语言学习
 *   *  html语言规范
     *  html标签简介
     *   *  单标签和双标签
         *  块元素与内联元素
         *  特殊字符
     *  表单
     *   *  源代码
         *  效果图
         *  关于表单的提交
 *  CSS
 *   *  标签选择器
     *  ID选择器
     *  类型选择器
     *  组合选择器
     *  后代选择器
     *  子元素选择器
     *  兄弟选择器

# HTML语言学习 #

## html语言规范 ##

<!DOCTYPE html>             
    <html lang="zh_CN">   
    
    <head>                      
        <meta charset="UTF-8">  
        <title>标题</title>      
    </head>
    <body>                      
        hello
    </body>
    </html>

## html标签简介 ##

标签格式：

> <标签名>封装的数据</标签名>

标签名大小不敏感

标签拥有自己的属性

1.  基本属性：`bgcolor="red"`——可以修改的简单样式的效果（bgcolor是北京颜色）
2.  事件属性：`onclick="alert('你好！')"`——可以直接设置事件响应后的代码（onclick表示点击事件）
    
     *  `alert`是JavaScript提供的一个警告框函数，它可以提供任意参数.参数就是警告框的提示信息

### 单标签和双标签 ###

1.  单标签格式：<标签名/> `<br/>`——换行`<hr/>`——水平线
    
     *  常见的单标签如下
        
            <br/>		//表示换行
            <hr/>		//表示一条水平线
            <img/>	//表示在网页中嵌入一幅图片
            	<img src="../imgs/3.jpg" width="200" height="260" alt = "找不到图片"/>
            
            <input>	//用于收集用户信息，用户的输入（账号、密码等输入信息都存在该标签的value中）
            <link>	//链接到外部央视文件（放在<head>标签中）
            	<link rel="stylesheet" type="text/css" href="theme.css">
2.  双标签格式：<标签名>…封装的数据…</标签名>
    
     *  常见的双标签
        
            <html>
            <head>
            <title>
            <body>
              
              
            /*		 表格	 		*/
            <table>		// 表格标签，可以在其内部增加属性对表格的整体特征进行修改
              	<table align="center" border="1" width="300" height="300" cellspacing="0"> 
            <tr>			// 表格中的行
            <td>			// 行里的单元格，可以对单元格设置跨行和跨列
              <td colspan="2" rowspan="2">4.4</td>
              
            /*			列表	 		*/
              <ul type = '修改列表项符号'>
                <li></li>列表项
              </ul>	无顺表
              
              <ol>	//	有序列表
                <li></li>
              </ol>
              
              
            <span>		// span占用的是 内容有多宽 就 占用多宽 的空间距离（注意和div进行对比）
            <div>			// div占用的位置是一行
              
              
              
            <h1><h2><h3><h4><h5><h6>			// h是标题，h1最大 h6最小
            <p>				// p是段落 标签定义段落。会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
            
              
              
            
              
            <style> 	// 用于在<head></head>中设置css样式
            <script>  // 用于在<head></head>中设置JavaScript样式，但如此以后就不能再内部增加属性（二选一）
            
              
              
            <form>		// 用于定义一个表单，收集用户输入的信息
              	<form action="http://localhost:8080" method="post"> // 表明表单提交的地址以及信息发送的方式
            
              
              
            <a>	// 用于定义超链接（从一个页面链接到另一个页面）或锚（用于从页面当前位置跳转至指定锚点），最重要的是href属性
            	<a href="//www.baidu.com" target="_blank">打开新窗口，跳转到百度</a>
            	<a href="#">空锚点，回到最顶端，不刷新页面</a>
              
              
              
            <b>		// 加粗
            <u>		// 斜体
            <strong>	// 加粗

### 块元素与内联元素 ###

**块元素**：块级元素在浏览器显示时，通常会以新行来开始（和结束）。

*  例子：`<h1>, <p>, <ul>, <table>`

**内联元素**：内联元素在显示时通常不会以新行开始。

*  例子：`<b>, <td>, <a>, <img>`

⚠️要点

1.  标签不能交叉嵌套（有文本内容的(双标签)以及无文本内容的(单标签)都不能出现嵌套错误）
2.  属性必须有值，属性值必须加**引号**
3.  注释不能嵌套

*  上述问题虽然浏览器会帮忙修复，但浏览器修复会影响浏览器呈现效率

### 特殊字符 ###

## 表单 ##

表单是在html中用来与**用户交互并提交数据**的，，在其内部**可以包含很多子元素**，来实现对**各种交互控件的定义**（文本字段、复选框、单选框、提交按钮等等），比如\*\*< input>、< button>、< select>、< textarea>\*\*等标签。

input type=text     是文件输入框  value设置默认显示内容
    input type=password 是密码输入框  value设置默认显示内容
    input type=radio    是单选框    name属性可以对其进行分组   checked="checked"表示默认选中
    input type=checkbox 是复选框   checked="checked"表示默认选中
    input type=reset    是重置按钮      value属性修改按钮上的文本
    input type=submit   是提交按钮      value属性修改按钮上的文本
    input type=button   是按钮          value属性修改按钮上的文本
    input type=file     是文件上传域
    input type=hidden   是隐藏域    当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
    
    select 标签是下拉列表框
    option 标签是下拉列表框中的选项 selected="selected"设置默认选中
    
    textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
        rows 属性设置可以显示几行的高度
        cols 属性设置每行可以显示几个字符宽度

### 源代码 ###

<form action="http://localhost:8080" method="post">
      <input type="hidden" name="action" value="login" />
      // 是一个隐藏的提交项，可以传递参数，但用户看不见它
      <h1 align="center">用户注册</h1>
      <table align="center">
        <tr>
          <td> 用户名称：</td>
          <td>
            <input type="text" value="默认值"/>
          </td>
        </tr>
        <tr>
          <td> 用户密码：</td>
          <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
          <td>确认密码：</td>
          <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
          <td>性别：</td>
          <td>
            <input type="radio" name="sex"/>男
            <input type="radio" name="sex" checked="checked" />女
          </td>
        </tr>
        <tr>
          <td> 兴趣爱好：</td>
          <td>
            <input type="checkbox" checked="checked" />Java
            <input type="checkbox" />JavaScript
            <input type="checkbox" />C++
          </td>
        </tr>
        <tr>
          <td>国籍：</td>
          <td>
            <select>
              <option>--请选择国籍--</option>
              <option selected="selected">中国</option>
              <option>美国</option>
              <option>小日本</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>自我评价：</td>
          <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
          <td><input type="reset" /></td>
          <td align="center"><input type="submit"/></td>
        </tr>
      </table>
    </form>
    </body>
    </html>

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70]

### 关于表单的提交 ###

表单提交的时候，数据**没有发送给服务器**的三种情况

1.  表单项没有**name属性**，每一个需提交的表单项都应当有一个`name='xxxx'`的属性
2.  单选、复选（下拉列表中的option标签都应当**给value属性**）
3.  表单项不在提交的from表单中

如上述代码中，是将form表单提**交给对应的ip地址**，有两种提交方式

GET请求：

*  浏览器地址栏中的地址是：action属性+？+【请求参数】，请求参数的格式是：key=value用&连接
 *  不安全
 *  有数据长度的限制

POST请求：

*  浏览器地址栏中只有action属性值
 *  相对于GET请求要安全
 *  理论上没有数据长度的限制

# CSS #

CSS是控制html呈现样式的标记语言，其最重要的内容就是几种不同的选择器

## 标签选择器 ##

最常见的CSS选择器是标签选择器，由于html代码中多是一个个标签构成的语句，因此如果想要对标签进行选择修饰，就应当用标签选择器。

上述代码是写通过将标签选择器内容写在中实现对有关内容的选择，当然也可以在单个标签行中进行编辑

## ID选择器 ##

可以通过给每个标签定义一个id，然后在中通过id选择器对其进行选择修改

上述代码完成的是通过id选择器进行选择修饰

## 类型选择器 ##

可以通过给每个标签添加一个`class`属性，实现对其选择修改

## 组合选择器 ##

可以将上述任意选择器进行组合选择

## 后代选择器 ##

由于html标记语言中的标签是一个个嵌套出现的，在语义上可以构成子父类关系，因此也为此构建了后代选择器，专门用于针对这些关系进行选择

例如，对于下述代码块

<h1>This is a <em>important</em> heading</h1>
    <p>This is a <em>important</em> paragraph</p>

可以通过

h1 em { color:red;}

定位到对应的；上述代码含义为将h1的后代em进行修饰，不是h1的后代无法修饰

## 子元素选择器 ##

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，对于下述代码块：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

可以通过

h1 > strong { color:red;}

由于第一行中两个都是

#  #

的子元素，因此上述两个都可以被选。二下面代码由于 是

#  #

的孙子元素，因此不会被选中。

子类选择器同样可以和其他选择器组合使用

## 兄弟选择器 ##

**可选择紧接在另一元素后的元素，且二者有相同父元素。**

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p { margin-top:50px;}

该选择器读作：“选择紧接在 h1 元素后出现的段落p元素，h1 和 p 元素拥有共同的父元素”。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70]: /images/20221024/12b226c55cd2453c8cf414c62dbeda2a.png