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

最新推荐文章于 2024-03-21 14:13:41 发布

无问西东。

最新推荐文章于 2024-03-21 14:13:41 发布

阅读量1.1k

点赞数 4

分类专栏： JavaWeb 文章标签： javaweb javascript css html

本文链接：https://blog.csdn.net/weixin_43725818/article/details/114017813

版权

JavaWeb 专栏收录该内容

19 篇文章 19 订阅

订阅专栏

文章目录

HTML语言学习
CSS

HTML语言学习

html语言规范

<!DOCTYPE html>             <!-- 约束，声明 -->
<html lang="zh_CN">   <!-- html标签表示html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分，分别是head和body-->

<head>                      <!-- 表示头部信息，一般班汉三部分内容，title标签，css样式，js代码 -->
    <meta charset="UTF-8">  <!-- 表示当前页面使用UTF-8字符集 -->
    <title>标题</title>      <!-- 表示标题 -->
</head>
<body>                      <!-- body是整个html页面显示的主题内容 -->
    hello
</body>
</html>

html标签简介

标签格式：

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

标签名大小不敏感

标签拥有自己的属性

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

单标签和双标签

单标签格式：<标签名/> <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">

双标签格式：<标签名>…封装的数据…</标签名>

常见的双标签

<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是段落 标签定义段落。会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

  <!--
            div标签       默认独占一行
            span标签      它的长度是封装数据的长度
            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：把 <br> 换行标签 变成文本 转换成字符显示在页面上

	常用的特殊字符:
		<	===>>>>		&lt;
		>   ===>>>>		&gt;
	  空格	===>>>>		&nbsp;
-->

表单

表单是在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>

效果图

在这里插入图片描述

关于表单的提交

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

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

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

GET请求：

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

POST请求：

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

CSS

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

标签选择器

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

<style type="text/css">
  html {
    background-color: black;
  }

  p {
    font-size: 30px; 
    backgroud-color: gray;
  }

  h2 {
    background-color: red;
  }
</style>

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

ID选择器

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

<style type="text/css">

#id001{
  color: blue;
  font-size: 30px;
  border: 1px yellow solid;
}

#id002{
  color: red;
  font-size: 20px;
  border: 5px blue dotted ;
}

</style>
<body>		
	<div id="id002">div标签1</div>
	<div id="id001">div标签2</div>
</body>

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

类型选择器

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

<style type="text/css">
.class01{
  color: blue;
  font-size: 30px;
  border: 1px solid yellow;
}

.class02{
  color: grey;
  font-size: 26px;
  border: 1px solid red;
}
</style>

<body>
	<div class="class02">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class02">span标签class01</span>
	<span>span标签2</span>
</body>

组合选择器

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

<style type="text/css">
	.class01 , #id01{
  color: blue;
  font-size: 20px;
  border:  yellow 1px solid;
}
</style>

<body>
   <div id="id01">div标签class01</div> <br />
   <span class="class01">span 标签</span>  <br />
</body>

后代选择器

由于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 元素拥有共同的父元素”。

无问西东。

关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
尚硅谷JavaWeb笔记——HTML、CSS（后端补充前端知识，这些就够了）

文章目录HTML语言学习html语言规范html标签简介单标签和双标签块元素与内联元素特殊字符表单源代码效果图关于表单的提交CSS标签选择器ID选择器类型选择器组合选择器后代选择器子元素选择器兄弟选择器JavaScriptJavaScript中的变量变量的声明数组JavaScript中的运算逻辑运算关系运算JavaScript中的函数函数的声明有关注意事项JavaScript中的对象方法一：使用new的方式定义对象方法二：使用大括号建立对象JavaScript中的事件注册onload事件注册onclick
复制链接

扫一扫

专栏目录