文章目录

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

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

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

尚硅谷JavaWeb笔记——书城项目（第五阶段：图书模块（课程精华！！！！））
文章目录第五阶段-图书模块 MVC说明开发流程 Step1:编写图书模块的数据库表 Step2:编写图书模块的JavaBean对象 Step3:编写图书模块Dao和测试Dao 出现的问题:数据无法 ...
【尚硅谷 JavaWeb 笔记】onsubmit事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
06 CSS-盒子模型【尚硅谷JavaWeb教程】
06 CSS-盒子模型[尚硅谷JavaWeb教程] JAVAWEB的学习笔记学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source ...
Java 基础第3阶段：高级应用——尚硅谷学习笔记（含面试题） 2023年
Java 基础第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 Java 基础第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年第 9 章异常处理 9.1 异 ...
尚硅谷 jQuery 笔记(张晓飞 2018)
title: 尚硅谷 jQuery 笔记 date: 2020-11-24 21:40:50 toc: true description: jQuery是JS的一个封装的库函数集,用于DOM的CRUD ...
04 frameset-iframe【尚硅谷JavaWeb教程】
04 frameset-iframe[尚硅谷JavaWeb教程] JAVAWEB的学习笔记学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd ...
尚硅谷_CSS3 笔记
目录什么是CSS3 选择器基本选择器及其扩展属性选择器伪类与伪元素选择器 css声明的优先级自定义字体&字体图标复习1 新的UI方案文本新增样式 opacity RGBA 文字阴 ...
B站MySQL(尚硅谷)学习笔记
B站MySQL基础(尚硅谷)学习笔记最近在学习数据库技术,并且把视频中的知识点进行了汇总,字数较多,仅供参考. 会持续更新欢迎读者提出问题与错误,一起交流~ 视频前几集所讲述的基本知识: DB:数 ...
尚硅谷JavaSE笔记（四）
系列文章目录尚硅谷JavaSE笔记(一) 尚硅谷JavaSE笔记(二) 尚硅谷JavaSE笔记(三) 尚硅谷JavaSE笔记(四) 文章目录十六.File 类与 IO 流 1.java.io.Fi ...

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