文章目录

  • 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标签简介

标签格式：

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

标签名大小不敏感

标签拥有自己的属性

  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">
  1. 双标签格式：<标签名>…封装的数据…</标签名>
  • 常见的双标签
<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. 标签不能交叉嵌套（有文本内容的(双标签)以及无文本内容的(单标签)都不能出现嵌套错误）
  2. 属性必须有值，属性值必须加引号
  3. 注释不能嵌套
  • 上述问题虽然浏览器会帮忙修复，但浏览器修复会影响浏览器呈现效率

特殊字符

<!-- 特殊字符
	需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上

	常用的特殊字符:
		<	===>>>>		<
		>   ===>>>>		>
	  空格	===>>>>		 
-->

表单

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

效果图

尚硅谷 docker 笔记 尚硅谷html笔记_javaweb

关于表单的提交

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

  1. 表单项没有name属性，每一个需提交的表单项都应当有一个name='xxxx'的属性
  2. 单选、复选（下拉列表中的option标签都应当给value属性）
  3. 表单项不在提交的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 元素拥有共同的父元素”。