HTML学习笔记

最新推荐文章于 2024-01-15 16:57:15 发布

干饭人小田

最新推荐文章于 2024-01-15 16:57:15 发布

阅读量286

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_37946877/article/details/115802773

版权

前端专栏收录该内容

2 篇文章

订阅专栏

HTML

1、基本标签

a、段落标记

<p></p>

b、标题字

h1~h6

c、换行

独目标记的概念。

<br/>

d、水平线

<hr/>

e、预留格式

pre

f、粗体字

<b></b>

g、斜体字

<i></i>

h、插入字

<ins></ins>

i、删除字

<del></del>

j、右上角加字

<sup></sup>

k、右下角加字

<sub></sub>

l、font标签

<font size="3" color="red">This is some text!</font>

2、实体符号

a、空格

&nbsp;

b、大于号

&gt;

c、小于号

&lt;

3、表格

a、基本表格

<table border="像素" width="像素或百分比" height="像素或百分比" align="center">

	<tr align="center">

		<td>test</td>

		<td>test</td>

		<td>test</td>

	</tr>

	<tr>

		<td align="center">test</td>

		<td>test</td>

		<td>test</td>

	</tr>

	<tr>

		<td>test</td>

		<td>test</td>

		<td>test</td>

	</tr>

</table>

b、单元格合并

行合并：rowspan

列合并：colspan

c、th标签

可以代替td;使用th可以自动加粗、居中

thead、tbody、tfoot标签

4、背景颜色和背景图片

bgcolor

background

5、图片

（1）<img src="" width="" height="" alt="" title=""/>

（2）只设置图片的宽度，高度等比例缩放，不建议设置高度，设置高度容易失真。

6、超链接

（1）超链接的作用

向服务器发送请求，链接到某个资源

（2）链接到网络中的某个资源

<a href="http://www.baidu.com"></a>

（3）链接到本地的某个资源

<a href="本地文件的相对路径或绝对路径都可以"></a>

（4）图片做超链接

<a href=""><img/></a>

（5）超链接的target属性

_blank-----新窗口

_self------当前窗口

_parent----父窗口

_top-------顶级窗口

（6）用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果，只不过超链接更傻瓜式。

7、列表

a、有序列表

<ol type="1/A/a/I">

	<li>中国

		<ol>

			<li>北京</li>

			<li>天津</li>

			<li>上海</li>

		</ol>

	</li>

	<li>美国</li>

	<li>日本</li>

</ol>

b、无序列表

<ul type="disc/circle/square">

	<li>中国

		<ul>

			<li>北京</li>

			<li>天津</li>

			<li>上海</li>

		</ul>

	</li>

	<li>美国</li>

	<li>日本</li>

</ul>

8、表单

a、表单起什么作用

用户填写表单，提交数据给服务器，所以表单是专门用来收集用户数据的。

b、第一个表单

<form action="http://192.168.101.2:8080/crm/login">

用户名<input type="text" name="uname" />

密码<input type="password" name="pwd"/>

<input type="submit" value="登录"/>

<!--普通按钮不具备提交表单的能力-->

<input type="button" value="登录"/>

</form>

<!--submit放到form外部无法提交表单-->

<input type="submit" value="登录"/>

（1）action属性等同于超链接的href属性，填写请求的url

（2）input标签属于输入域标签，input标签的type属性是text，表示文本框，是password，表示密码框

（3）input标签的type是submit表示提交按钮，该按钮可以提交表单，所谓表单的提交是发送请求url，并携带数据给服务器。

（4）所有按钮的value属性都是用来设置按钮上显示的文本内容

（5）发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：url?name=value&name=value&name=value...，其中name是input标签的name属性，value是input标签的value属性

（6）文本框和密码框的value不需要开发人员指定，用户填写的数据就是value。

（7）submit按钮放到form标签外面无法提交表单

（8）普通按钮不具备提交表单的能力。

c、用户注册表单

（1）表单项包括

（1）用户名

<input type="text" name="username" />，value属性不需要写，用户填写的数据就是value

（2）密码

<input type="password" name="pwd" />，value属性不需要写，用户填写的数据就是value

（3）性别

男<input type="radio" name="gender" value="m"/>，性别是单选按钮，用户只能选，所以该标签需要添加value属性

女<input type="radio" name="gender" value="f" checked/>，checked默认选中

同一组的单选按钮，name必须相同

提交给服务器的数据是：gender=m 或者 gender=f

（4）兴趣

运动<input type="checkbox" name="aihao" value="sport"/>

音乐<input type="checkbox" name="aihao" value="music" />

跳舞<input type="checkbox" name="aihao" value="dance" checked/>，checked表示默认选中

同一组的复选框，name相同

以上三项都被选中的话，提交的数据是：aihao=sport&aihao=music&aihao=dance

（5）学历

学历

<select name="xueli">

	<option value="gz">高中</option>

	<option value="zk">专科</option>

	<option value="bk" selected>本科</option>

</select>

selected默认选中

当选中本科时，提交的数据为：xueli=bk

（6）简介

<textarea cols="列数" rows="行数" name="jianjie"></textarea>，文本域没有value属性，用户填写的内容就是value

（7）注册按钮

<input type="submit" value="注册"/>：该标签放在form标签内部才起作用

（8）重置按钮

<input type="reset" value="重置" />

（9）再次强调表单提交时的数据格式

action?name=value&name=value&name=value&name=value...

这是HTTP协议中规定的，这些有规律的数据提交给服务器之后，以后服务器端的java程序要解析这段数据的。

（2）form表单的method属性

（1）method不写或写上get都属于get请求，method写post才是post请求

（2）get请求在HTTP协议的请求行上提交数据，最终提交的数据会显示在浏览器地址栏上

（3）post请求在HTTP协议的请求体中提交数据，最终提交的数据不会显示到浏览器地址栏上

（4）只有当使用form表单，并且method属性设置为post才是post请求，其他请求均为get，超链接也是get请求。

d、下拉列表怎么显示多个条目，怎么支持多选

（1）支持多选：multiple="multiple"

（2）显示多个条目：size="3"

e、file控件

（1）文件上传时使用

（2）<input type="file"/>

f、hidden控件

隐藏域控件，页面上看不到，但提交表单时会提交数据

g、readonly与disabled

（1）readonly：只读，不能修改，提交表单时数据会提交

（2）disabled：只读，不能修改，提交表单时数据不会提交

h、input控件的maxlength

maxlength 属性规定输入字段的最大长度，以字符个数计。

9、HTML中元素的id属性

（1）讲述HTML文档是一棵树（DOM树），树上有很多节点，每个节点一般都会有id属性，id属性具有唯一性，在同一个文档中不能重复，id是该节点的唯一标识。后期所学的javascript语言可以对DOM树上的节点进行增删改，达到动态效果。javascript主要通过节点的id来获取该元素。

（2）<a id=""></a>，超链接有id；<form id=""></form>，form表单有id；<input type="text" id="username"/>，input标签有id。

10、div和span

（1）理解div是一种图层，div主要使用在网页布局方面，通过后期所学的CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。

（2）div图层可以嵌套使用

（3）默认情况下div独占一行，span不会独占行。