HTML知识概要

HTML知识概要

前言

HTML(HyperText Markup Language,超文本标记语言)是一种用来制作超文本文档的简单标记语言。

提示:以下是本篇文章正文内容,下面案例可供参考

一、HTML基础

1.HTML文档基础

HTML文档结构如下:

<!DOCTYPE html><!--文档类型 html-->
<html lang="en">
<head><!--头部内容,定义标题、样式等-->
	<meta charset="UTF-8">
	<title>Title</title><!--标题-->
</head>
<body>
	正文
</body>
</html>

二、常用标签

1.基本常用标签

1.标题标签<h1>-<h6>

:定义标题,从一级到六级,每级标题的字体大小依次递减。其中align是设置标题的对齐属性。

<h# align=left|center|right>...</h#>

2.段落标签<p>:在<p>标签中使用align属性设置段落的对齐方式,其中value有4个值:left、right、center和justify。

  <p align=value>...</p>

3.换行标签<br/>(单标签)

4.水平分割线标签<hr/>(单标签)

5.列表标签:
(1):无序列表<ul>:由<ul>标签开始,每个列表项由<li>标签开始。使用type属性可以指定出现在列表项前的项目符号的样式,type属性值及其对应的符号样式有,disc实心圆点(默认)、circle空心圆点、square实心方块。

<ul type="">
    <li>项目名称</li>
    <li>项目名称</li>
    <li>项目名称</li>
    ...
</ul>

(2)有序列表<ol>:由<ol>标签开始,每个列表项由<li>标签开始。使用type属性可以指定出现在列表项前的项目编号的样式,type属性值及其对应的编号样式有,1(阿拉伯数字(默认))、a(小写字母)、A(大写字母)、ⅰ(小写罗马数字)、Ⅰ(大写罗马数字)。使用start可以指定开始编号。

<ol type="" start="">
    <li>项目名称</li>
    <li>项目名称</li>
    <li>项目名称</li>
    ...
</ol>

(3)自定义列表<dl>

<dl> 表示定义列表

<dt> 定义的项目

<dd> 定义项目的描述

<dl>
   <dt>标题一</dt>
   <dd>描述一</dd>
   <dt>标题二</dt>
   <dd>描述二</dd>
    ...
</dl>

三.超链接

创建超级链接。

(1):href属性用于设置链接的目标。

(2):target属性用于用于指定打开链接的目标窗口。

(3):name属性用于规定链接的名称

<a href="url" target="" name="">超链接名称</a>

锚点链接:

用来标记网页中的特定位置,使它可以跳转到当前文档或其他文档中的标记位置。

(1)在同一页面内要使用锚点链接:

<a href="#锚点名称" target="窗口名称">链接标题</a>

(2)在不同页面内要使用锚点链接:

<a href="URL地址#锚点名称" target="窗口名称">链接标题</a>

以上两种链接形式,链接到的目标为:

<a name="锚点名称">链接内容</a>

一个锚点链接实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>锚点链接</title>
</head>
<body>
	<a href="#one">链接到页内标题</a>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h2><a name="one">标题</a></h2>
</body>
</html>

四.表格

表格标签:

定义表格。每个表格均有若干行(由<tr>标签定义),每个表格可以定义第一行的单元格为表头(由<th>标签定义),其余每行被分割为若干单元格(由<td>标签定义)。其中<table>标签的border属性可以指定边框宽度。

案例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>一个简单的表格</title>
</head>
<body>
	<table border="1">
    <tr>
    	<th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容(1,1)</td>
        <td>内容(1,2)</td>
        <td>内容(1,3)</td>
    </tr>
    <tr>
        <td>内容(2,1)</td>
        <td>内容(2,2)</td>
        <td>内容(2,3)</td>
    </tr>
</table>
</body>
</html>

效果图:

五.表单

表单由<form>标记,表单像一个容器一样包含各种类型的控件,常见的控件包含文本框、按钮、单选框、复选框、下拉列表框和文件选择输入框等等。

1.表单标签的用法

基本语法:

(1)name属性定义表单名称

(2)action属性指定表单提交的位置

(3)method属性定义表单结果的提交方式

<form name="" method="" action="">
    表单控件
    ...
</form>

2.post请求和get请求

​ get和post是来源HTTP协议中中最常见的两种请求提交方式。get和post的区别在:

​ 区别一:get 请求提交路径上存在属性的信息,不安全

​ post请求提交时路径上没有属性的信息,相对安全

​ 区别二:get 请求提交的数据URL有限制(限制于特定浏览器和服务器),而post请求提交的数据URL有限制

3.文本框标签

<input>标签用于收集用户输入的数据。根据type属性的不同,输入框拥有多种类型,常见的有text文本框、password密码框、checkbox多选框、radio单选框、submit提交按钮、reset重置按钮、file文件上传。

4.下拉列表框

<select>标签与<option>标签可创建单选或多选下拉列表,常用属性有disabled(规定禁用该下拉列表)和multiple(规定可选择多个选项),基本语法:

<form>
    <select name="">
        <option value=""></option>
        ...
        <option value=""></option>
    </select>
</form>

5.多行文本框标签

<textarea>标签可以定义多行文本框,<textarea>标签常用属性为name、cols、rows,基本语法:

<form>
    <textarea name="textarea" cols="" rows="">
    文字
    </textarea>
</form>

6.表单实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div align="center">
	<h1>虫虫表单实例</h1>
	<hr>
	<form action="1.html" method="get">
	<p>用户名:<input type="text" name="username" value="请输入您的用户名"/></p><br>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
	<input type="password" name="pwd"/></p>
	<p>请输入您的性别:
     <input type="radio" name="sex" value=""/><input type="radio" name="sex" value=""/></p>
	<p>
		请选择您喜欢的书籍类型:
		<input type="checkbox" name="hobby" value="都市言情" />都市言情
		<input type="checkbox" name="hobby" value="古代穿越" />古代穿越
		<input type="checkbox" name="hobby"  value="现代科技"/>现代科技
		<input type="checkbox" name="hobby"  value="悬疑推理"/>悬疑推理
		<input type="checkbox" name="hobby"  value="历史人文"/>历史人文
	</p>
	<p>
		请选择您的城市:
		<select name="city">
		    <option>--请选择城市--</option>
			<option>北京</option>
			<option>上海</option>
			<option>广州</option>
			<option>重庆</option>
			<option>成都</option>
		</select>
	</p>
	<p>
		请选择您的爱好:
		<select name="style" multiple="multiple"><!--multiple属性可以多选-->
		    <option>--请选择类型--</option>
			<option>音乐</option>
			<option>体育</option>
			<option>看书</option>
			<option>科技</option>
			<option>美术</option>
		</select>
	</p>
	<p>
		<textarea  rows="5" cols="50">
			想写什么写什么!
		</textarea>

	</p>
    <p><input type="submit" value="提交"/>
       <input type="reset" value="重置"/>
       <input type="button" value="button"/><!--没写事件,一个没用的按钮-->
    </p>
		
	</form>
</div>
</body>
</html>

效果如图:

六.图像映射

<img>标签src属性为所引用图片的URL地址。width和height属性可以更改图像的尺寸,其单位可以是px或者百分比,align属性定义图像的对齐方式。

其中usemap属性用于做位图。图片映射指的是带有可单击区域的图像,<area>标签定义图像映射的区域,<area>元素总是嵌套在<map>标记中。

基本语法:

<img src="" width="" height="" usemap=#映射图名称>

map标记

定义映射图:<map>标签<area>标签

<map>标签定义映射区域:

<map name="namemap" id="namemap"></map>

<area>标签定义映射区域

<area shape="形状" coords="坐标" href="url" alt="替换文本"/>

图像映射实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图像映射实例</title>
</head>
<body>
	<img src="https://img1.baidu.com/it/u=2669465948,2438487741&fm=26&fmt=auto&gp=0.jpg" usemap="#dog">
	<map name="dog">
		<area shape="circle" coords="338,175,50" href="https://www.baidu.com/" alt="百度首页"></area>
	</map>
</body>
</html>

七.框架集

frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

<frameset>标签不可与<body>标签一起使用。

<frameset>标签中可用rows(水平分割)或cols(垂直分割)属性来进行分割。

基本语法:

<html>
    <frameset rows="高度1,高度2,...,*">
        <frame>
        <frame>
        <frame>
        ...
    </frameset>
</html>

实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>框架集实例</title>
</head>
<frameset cols="20%,30%,*">
	<frame>
	<frame>
	<frame>
</frameset>
</html>

附:常用特殊符号

特殊符号符号代码说明
&nbsp;空格
&&amp;连接符
©&copy;版权所有
®&reg;注册
&trade;商标
§&sect;小节
&euro;欧元
±&plusmn;加减符号
×&times;乘法符号
÷&divide;除法符号
·&middot;中间点
&lt;小于符号
&gt;大于符号
¥&yen;人民币符号
°&deg;
£&pound;

总结

以上大多数标签的样式都在CSS中设置,或者HTML5已淘汰的标签,所以没有记录相关知识!

以上为本人的简要总结,各位大佬请多指教!

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值