HTML笔记

最新推荐文章于 2024-12-02 22:34:55 发布

小肥宅@

最新推荐文章于 2024-12-02 22:34:55 发布

阅读量328

点赞数

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

本文链接：https://blog.youkuaiyun.com/manxianglin/article/details/120088983

版权

前端专栏收录该内容

4 篇文章

订阅专栏

1、

B/S架构：浏览器/服务器
C/S架构：客户端/服务器

2、基本格式：

<! doctype html>
<html>
<meta charset="utf-8">
<head>
<title>HTML的基本标签</title>
</head>
<body>
<!--这是注释-->
</body>
</html>

3、标记：

(1)段落标记：<p></p>
(2)标题字：<h1></h1>,.......<h6></h6>
(3)换行标记(独目标记)：<br>
(4)横线：<hr color="red" width="50%">
(5)预留格式：<pre></pre>
(6)
①<del>删除字</del>,
②<ins>插入字</ins>
③<b>粗体字</b>
④<i>斜体字</i>
⑤10的平方：10<sup>2</sup>
⑥10的右下角m：10<sub>m</sub>
(7)字体标签：<font color="red" size=10px>字体标签</font>
(8)实体符号：  &lt;  小于号（<）
&gt;  大于号（>）
&nbsp; 空格（ ）

4、表格：

<table align=”center” border=”1px” width=”30%” height=”100px”></table>
表格每一列的第一个单元格：<th>我是表格列的头</th>
行：<tr align=”center”></tr>
每一行的格子：<td align=”center”></td>
属性：align="center"表示居中

5、单元格合并：

(1)上下两个单元格合并，先把下面那个单元格删掉，再将上面那个单元格加
rowspan=”2”
(2)左右两个单元格合并，随便删掉两个单元格的任意一个，再将剩下的单元格加
colspan=”2”

6、表格划分：

 <thead></thead>
<tbody></tbody>
<tfoot></tfoot>

7、设置背景颜色和图片：

如：<body bgcolor=”blue” background=”logo.png”></body>

8、图片标签:

如：<img src=”img/logo2.png” width=”10%” title=”我是logo” alt=”找不到图片”/>
src:图片路径
width:图片宽度
title：鼠标悬停到图片上时，显示的内容
alt：当网页加载不出来图片时，显示的内容

9、超链接：

如：

<a href=”https://www.baidu.com” target=”_blank”>
	<img src=”img/logo2.png” width=”10%” title=”我是logo” alt=”找不到图片”/>		
</a>

target有四个属性： _blank:新窗口
				  _self：本窗口（默认）
				  _top：顶级窗口
				  _parent：父窗口

10、列表：

(1)无序列表：
如：

<ul type=”circle”>
	<li>中国
		<ul>
			<li>北京</li>
			<li>上海</li>
		</ul>
	</li>
	<li>美国</li>
	<li>日本</li>
</ul>

type有三个样式：circle（空心圆圈），disc（实心圆圈），square（正方形）

(2)有序列表：

<ol type=”I”>
	<li>水果
		<ol type=”a”>
			<li>葡萄</li>
			<li>芒果</li>
		</ol>
	</li>
	<li>肉类</li>
	<li>海鲜</li>
</ol>

11、表单：

将用户填写的信息提交给服务器
如：

<form action=”http://192.168.12.2:8080/t/a” method=”post”>
	用户名<input type=”text” name=”name”/>
	密码<input type=”password” name=”pwd”/>
	性别
	<input type=”radio” name=”sex” value=1 checked/>男
	<input type=”radio” name=”sex” value=2/>女
	学历
	<select name=”grade”>
			<option value=”gz”>高中</option>
			<option value=”dz”>大专</option>
			<option value=”bk” selected>本科</option>
			<option value=”ss”>硕士</option>
	</select>
	<textarea row=”10” cols=”60” name=”introduce”></textarea>
	<input type=”submit” value=”注册”/>
</form>

（1）form标签的action属性：指将收集到的信息提交到哪个服务器上的哪个端口对应的软件
（2）form标签的method属性：
get：用户提交的信息显示在浏览器地址栏上
post：用户提交的信息不显示在浏览器地址栏上
（3）input的type属性：当为submit时，显示为一个按钮，且具备提交表单的能力
button：只是一个按钮
text：文本框
…
（4）input的value属性：设置显示在按钮上的文字或用户输入进来的信息
（5）当type为radio时，即为单选按钮时，如果想实现只能选一个的操作，比如性别选项，那么就需要给他们取相同的name，就可以分为同一组，实现只能选一个的效果，如果需要将数据提交，还需要设置value属性，因为表单提交格式为name=value
（6）input后加checked表示默认选中
（7）select里的option加selected表示默认取值
（8）textarea：文本域
注意：
表单是以什么格式提交数据给服务器的?

http://localhost:8080/jd/login?username=abc&userpwd=111

格式:
action？name=value&name=value&name=value&name=value&name=value...
HTTP协议规定的，必须以这种格式提交给服务器。

重点强调:表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。如：<input type=”text” name=”sss”/>这表示要将里面的内容一并提交

12、select标签加multiple=”multiple”表示支持多选，size=2表示显示的条目数量

如：

<select multiple=”multiple” size=2>
	<option>河北省</option>
	<option>广东省</option>
	<option>湖南省</option>
	<option>福建省</option>
</select>

13、file控件：

<input type=”file”>

14、隐藏域：

网页上看不到，但那是你表单提交会提交给服务器

<input type=”hidden” name=”userid” value=”111”/>

15、readonly和disabled的异同

相同点:都是只读不能修改。
不同点：readonly可以提交给服务器，disabled数据不会提交 (即使有name属性也不会提交。)
例：<input type=”text” name=”tt” value=”123” readonly/>