自学HTML的回顾（1/1）

最新推荐文章于 2024-04-19 09:36:51 发布

zourenqiang

最新推荐文章于 2024-04-19 09:36:51 发布

阅读量100

点赞数

分类专栏：小白自学文章标签： html web

本文链接：https://blog.csdn.net/qq_39993973/article/details/107294807

版权

小白同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

自学

29 篇文章 0 订阅

订阅专栏

自学html的回顾（1/1）

HTML概述
基本结构
基本标签
表格
超链接
背景
列表
表单
id属性、div和span的重要性

HTML概述

html是超文本编辑语言，由大量标签组成，每个标签都有开始和结束，语句较为松散，这套语言是由W3C（世界万维网联盟）定制的一套规范。

基本结构

普遍的系统结构分为两种：
1、B/S结构：
浏览器/服务器的结构
优点：更新快
缺点：速度慢、用户体验不好、界面不美观
2、C/S结构：
客户端/服务器的结构
优点：速度快、界面好
缺点：更新麻烦，维护成本高

基本标签

一个基本的html代码组成是由html、head、body、title标签组成，以html开始和结束，头部主要写标题，身体部分主要写网页的内容。而标签就是帮助构建网页的重要组成部分。

<html>
	<head>
		<title>我的主页</title>
	</head>
	<body>
		<p>段落1</p>
		<p>段落2</p>
		<h1>第一标题</h1>
		<h2>第二标题</h2>
		<h3>第三标题</h3>
		<h4>第四标题</h4>
		<h5>第五标题</h5>
		<h6>第六标题</h6>
		<br>换行
		<pre>预留文本格式</pre>	
		<br>
		<hr color="green" width="20%"></hr>
		<del>删除字</del>
		<ins>插入字</ins>
		<b>粗体字</b>
		<i>斜体字<i/>
		10<sup>2</sup>
		10<sub>2</sub>
		<font color='red'>红色字</font>
		b&lt;a&gt;c<!--实体符号以&开始,以;结束。lt是<,gt是>,nbsp是空格-->
	</body>
</html>

表格

关键字：table、tr（行）、td（每一个单元格）
table中有几个常用的属性：
1、border：边框
2、width：宽度
3、height：长度
4、align：所处布局位置
td的合并单元格：
1、rowspan：向下合并单元格。
2、colspan：向左右合并单元格

<html>
	<head>
		<title>表格</title>
	</head>
	<body>
		<table border="1px" width="50%" height="50%" align="center">
			<tr align="center">
				<td>1</td>
				<td rowspan="2">2</td>
				<td>3</td>
			</tr>
			<tr align="center">
				<td>4</td>
				<td>6</td>
			</tr>
			<tr align="center">
				<td>7</td>
				<td colspan="2">8</td>
			</tr>
		</table>
	</body>
</html>

超链接

关键字：a
a标签中的重要属性：
1、href：代表url，即连接到的地址，对地址发送请求。
2、target：
获取链接后显示的方式
（1）blank：新的页面
（2）_self：当前窗口
（3）_top：顶级窗口
（4）_parent：父窗口
超链接可以是文字，也可以是图片，也可以是其他各种样式

<html>
	<head>
		<title>超链接</title>
	</head>
	<body>
		<a href="http://wwww.baidu.com" target="blank">
			百度
		</a>
	</body>
</html>

背景

关键字：bgcolor（背景颜色）、background（背景图片）、img（图片）
img有几个常用的属性：
1、title：
鼠标悬停在图片上显示的文字
2、alt：
找不到这个图片资源的时候会显示

<html>
	<head>
		<title>背景</title>
	</head>
	<body bgcolor="green" background="1.png">
		<img src="2.jpg" title="图片" alt="图片找不到"></img>
	</body>
</html>

列表

关键字：ol（有序列表）、ul（无序列表）、li（列表的元素）,
列表可以嵌套。


<html>
	<head>
		<title>列表</title>
	</head>
	<body>
		<ol>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ol>
		<ul>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>

表单

关键字：form、input
表单中的数据是要提交给指定的url，需要提交的带上name和value，如果是手写的文本就可以不用指定value，如果是鼠标点击的就必须要指定value，格式是action?name=value&name=value。
input中有几个常用的属性：
1、type：
指定类型：
（1）text：文本框
（2）radio：单选按钮，如果想让多个单选按钮只有一个能被选中，就多个单选按钮为同一name。
（3）checkbox：勾选框。
（4）select：下拉列表，其中option代表选项，属性multiple代表可多选，属性size代表可显示的选项个数。
（5）file：指定上传文件
（6）hidden：指隐藏，数据照常上传，但是用户不可见
（7）submit：提交表单中数据的按钮
（8）reset：重置表单中的数据
2、name：提交数据不可缺少的部分
3、value：指定name的上传数据
form中有几个常用的属性：
1、action：和href相同，表示目标地址。
2、method：post和get，post代表提交的数据在地址栏中不可见，get表示可见，默认是可见。


<html>
	<head>
		<title>表单</title>
	</head>
	<body>
	<!--表单往服务器上提交的是value格式是：action?name=value-->
		<form action="背景.html" >
			<input type="text" name="1"></input>
			<input type="radio" name="2" value="1">男</input>
			<input type="radio" name="2" value="0">女</input>
			<input type="checkbox" name="3" value="1" checked>是否成年</input>
			&nbsp;&nbsp;
			<select name="4" multiple="multiple" size="2">
				<option value="0">本科</option>
				<option value="1">硕士</option>
				<option value="0">高中</option>
				<option value="1">专科</option>
			</select>
			<br>
			<input type="file"></input>
			<input type="hidden" name="5" value="6" />
			<textarea rows="10" cols="60" name="6"></textarea>
			<input type="submit" value="提交"></input>
			<input type="reset"></input>
		</form>
	</body>
</html>