HTML笔记

最新推荐文章于 2022-08-19 09:08:00 发布

Geneartion_Z

最新推荐文章于 2022-08-19 09:08:00 发布

阅读量103

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/Geneartion_Z/article/details/107262733

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基本标签设置

段落标记		<p>  
1到6号标题  <h1~h6>
预留格式 <pre>
删除字 <del>
插入字 <ins>
粗体字 <b>
斜体字 <i>

上标 <sup>
————————
10<sup>2</sup>
————————


下标 <sub>
————————
10<sup>2</sup>
————————

字体标签 <font>
————————————
写一个颜色为红色，大小为20的“文字”
<font color="red" size="20">文字</font>
————————————

**独目标记**
换行标记  <br>
横线 <hr>
——————————————————
红色横线，网页占比百分之五十：
<hr color = "red" width = "50%">
——————————————————

实体符号

实体符号特点是：以&开始，以;结束。
lt 是小于号 gt 是大于号 nbsp是空格

表格

<table></table>
<tr> 行
<td> 列
———————————————————————————————————
align 对齐方式。。。。border 边框。。。。。width 宽度。。。。height 高度
<table align="center" border="1px" width="60%" height="150px"></table>
	<tr> 行
		<td> 列
		</td> 列
	</tr> 行
———————————————————————————————————

th标签

<th>单元格标签，但是比td多的是居中，加粗</th>
注意事项：
			1、row合并的时候，删除“下面的”单元格
			2、col合并的时候，对删除哪个没有要求。

		<tr>
			<th>员工编号</th>
			<th>员工薪资</th>
			<th>部门名称</th>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
			<td rowspan="2">f</td>
		</tr>
		<tr>
			<td colspan="2">d</td>
		</tr>

thead、tbody、tfoot标签

这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意：并不是设置当前页面的字符编码方式
meta charset=“gbk”

在table中不是必须的，便于写后期的js代码，把表格分为三部分

背景颜色、背景图片

<body bgcolor="red" background="img/bd_logo1.png">

图片样式

<!--
		1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
		2、img标签就是图片标签
		3、src属性是图片的路径
		4、width设置宽度,height设置高度
		5、title设置鼠标悬停时显示的信息。
		6、alt设置图片加载失败时显示的提示信息。
	-->

	<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img>

超链接

	<a href="http://www.baidu.com">百度</a>
	<a href="http://news.baidu.com/">百度新闻</a>
	<a href="http://www.jd.com/">京东商城</a>
	<a href="http://www.tmall.com/">天猫</a>
	<a href="http://www.126.com/">126邮箱</a>

		href：hot references 热引用
		href属性后面一定是一个资源的地址。
		
		href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。

		超链接有一个target属性：
			可取值：
				_blank : 新窗口
				_self ： 当前窗口（默认就是这种方式。）
				_top ： 顶级窗口
				_parent ： 父窗口

	<a href="https://www.hao123.com/" target="_self">
		<img src="img/hao123.png" width="120px"/>
	</a>
	

超链接的作用：
	通过超链接可以从浏览器向服务器发送请求。
	浏览器向服务器发送数据（请求：request）
	服务器向浏览器发送数据（响应：response）
	
	B/S结构的系统：每一个请求都会对应一个响应。

列表

	<!--有序列表-->
	<ol type="I">
			<li>苹果</li>
			<li>西瓜</li>
			<li>桃子</li>
	</ol>
	
	<!--无序列表-->
	<ul type="circle">
		<li>东城区</li>
		<li>西城区</li>
	</ul>

<重点中的重点>表单

	<!--
		1、表单。收集用户信息。用户填写，点击提交按钮提交数据给服务器。
		2、使用form标签画表单。
		3、可以有多个表单。
		4、表单最终是需要提交数据给服务器的
		<form action="http://192.168.111.3:8080/oa/save">
			表单内容
		</form>
		
		<!-- 画按钮可以使用input输入域。-->
		<!-- 可提交的按钮-->
		<input type="submit" value="登录"/>
		<!--普通按钮-->
		<input type="button" value="设置按钮上显示的文本"/>


	<form action="http://localhost:8080/jd/login">
		用户名<input type="text" /><br>
		密码<input type="password" /><br>
		<input type="submit" value="登录" />
	</form>

		表单是以什么格式提交数据给服务器的？
			格式：action?name=value&name=value&name=value&name=value&name=value...
		重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。
		
		文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
		
		但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = "";
			
	<!--submit必须放到form标签内部-->
	<input type="submit" value="登录" />
	
	<!--必须放到form标签内部-->
	<input type="reset" value="清空" />

下拉列表支持多选

			<select multiple="multiple" size="2">

			</select>

file控件：文件上传专用

<input type="file" />

隐藏域

	<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
<input type="hidden" name="userid" value="111" />

readonly和disabled

<!--
		readonly和disabled相同点：都是只读不能修改。
		但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）
	-->
	
		用户代码<input type="text" name="usercode" value="110" readonly />
		用户姓名<input type="text" name="username" value="zhangsan" disabled />
		<input type="submit" value="提交数据" />

在这里插入图片描述

设置文本框中可输入的字符数量

	<input type="text" maxlength="3" />

ID属性

<!--
		1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
		2、注意：表单提交数据的时候，只和name有关系，和id无关。
		3、id有什么用？
			javascript可以对HTML文档当中的任意节点进行增删改，id让获取元素（节点）更方便。
		4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
			javascript主要就是对这棵DOM树上的节点进行增删改的。
			DOM(Document)树。
	-->
		<!--id就是节点的身份证号码，不能重复。-->
		<!--
		<input type="text" id="username" />
		-->

div和span

				<!--
		1、div和span是什么？有什么用？
			* div和span都可以称为“图层”
			* 图层的作用是为了保证页面可以灵活的布局。
			* 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
			* div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
		2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
		现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
		
		3、div和span的区别？
			div独自占用一行（默认情况下）
			span不会独自占用一行。
	-->