HTML总结

最新推荐文章于 2022-11-19 14:43:56 发布

tenderbb

最新推荐文章于 2022-11-19 14:43:56 发布

阅读量238

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/tenderbb/article/details/111026141

版权

HTML思维导图及内容总结

了解html
- 各类标签
- - 表单，表格，列表

在这里插入图片描述

了解html

1.HTML是什么
HTML是超文本标记语言（Hyper Markup Language)，标准通用标记语言下的一个应用，HTML不是一种编程语言，而是一种标记语言（markup language),是网页制作必备。
页面可以包含图片，链接，音频，视频···
制作不是很复杂，但功能强大，无论使用的是什么类型的电脑或浏览器都可以被浏览到。
2.HTML结构详解

!DOCTYPE html:文件头--------页面的响应数据类型
html lang=“en”:html语言为英文（language 语言 english 英文 zh-cn 中文）
head:头部 body:正文
Meta–>metadata:源数据 title:文档的标题

     <html>... </html>,<head>...</head>,<body>...</body>...:双标签
    <meta>:单标签        
    <br/>:换行，单标签

UTF-8：Unicode码，全世界的通用码
Hn标签：表示文本标题
n的取值范围：1~6（n的取值越大，
字体越小，作用加粗）

各类标签

1.lmg 标签
表示页面上的图片
在这里插入图片描述

src:source 指图片的路径（url)
alt:表示图片的代替文本（当图片路径错误或不见时浏览器中显示的文字）
width:图片的高度
height:图片的高度

map:映射 erea:区域（在图片中找到一个区域作为跳转区域）
在这里插入图片描述

map:加id和name属性（任意设置）并在标签中加入 usemap="# "和
map标签中id一致
shape:规定图片上的形状（circle 圆形 rect 矩形）
coords:规定图片上形状的大小（使用截图动能找位置，圆形使用三个坐标点，
矩形使用四个坐标点）
href=“url”:加入想跳转去的地址
2.html5中的标签音频和视频
vedio:视频
audio:音频
在这里插入图片描述
3.常用但意义不明确的标签

<nav>:导航   <silde>:侧栏  
<header>:头部    <footer>:底部
<label>:标记标签  <span>:用于修饰文本

4.常用标签

div标签：网页的分区的显示
p标签：对行的控制
a标签：可以进行页面跳转默认为get请求（Href=“url”)
font标签：控制字体的大小和颜色
b标签：加粗
sub:下标（数学公式等中常用）
sup:上标（数学公式等中常用）
bgcolor:背景颜色
background:使用图片作为背景（不建议使用）
Align=“center”:表示居中（left 居左 right 居右）
锚点：是网页的展示到达某一个特定的点

  （<a href="#x"></a>
    <a name="x"></a>)

表单，表格，列表

1.Form表单
一般不会单独使用，会和input标签联合使用

<!DOCTYPE html>
 <html lang="en">
   <head>
<meta charset="UTF-8">
<title>我的青春</title>
</head>
<body bgcolor="#ccc">
<div align="center">
<h1>嘟嘟书城</h1>
<form action="2.html" method="get">
<p>用户名:<input type="Text" name="username" value="请填入您的姓名"><br/></p>
<p>密码:<input type="Password" name="pow"00><br/></P>
<p>请选择您的性别
	<input type="radio" name="sex" value="男">男
	<input type="radio" name="sex" value="女">女
</p>
<p>请选择您喜欢的书籍类型
    <input type="checkbox" name="habby" value="都市言情">都市言情
     <input type="checkbox" name="habby" value="霸道总裁">霸道总裁
      <input type="checkbox" name="habby" value="悬疑玄幻">悬疑玄幻
	
</p>
<p>请选择您的地区
	<select>
	<option value="北京">北京</option>
	<option value="上海">上海</option>	
	</select>
</p>
<p>请选择您的爱好
 <select multiple="multiple">
 	<option value="干饭">干饭</option>
 	<option value="睡觉">睡觉</option>
 </select>     	
</p>
<p>
	<textarea rows="5" cols="50"></textarea>
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="按钮"/>
</p>
</form>
</div>
</body>
</html>

Method="":请求方式
input type="" name=""
Text:文本框
password:密码框
Radio:单选框
Checkbox:多选框
submit:提交按钮
Reset:重置按钮
Button:普通按钮
页面跳转：可以使用form表单，action属性进行页面的跳转

select标签：选择框

(多选，使用multiple属性)

textarea:文本域

(rows:表示行数)
(cols:表示列数)

属性：action=“url”

(绝对路径：从盘符开始，要描述的文件路径，路径+文件的名称
相对路径：当前源文件和目标文件的相对路径位置)

HTTP协议

get请求：不安全，会把name属性的值暴露在地址栏上，地址栏默认大小为64kb
post请求：安全，不会把name属性的值暴露在地址栏上
两种请求方式都是能够让后台接受到数据
2.表格布局
通过表格来对网站进行整体的布局（目前来讲已淘汰）
表格的标签

table:表格
Tr:表行
Th:表头
Td：表元

在这里插入图片描述
3.列表
（1）无序列表

<ul>
   <li></li>
</ul>
适应场景：论坛新闻项，展开闭合，导航

（2）有序列表

<ol>
    <li></li>
</ol>
属性：reversed--->反转
type类型中可以使用数字，字母，罗马数字

（3）定义列表

<dl>
     <dt>今天</dt>
     <dd>today</dd>
</dl>

4.多窗口框架
一个页面可以显示多个窗口
HTML4.0版本：frameset 多窗口
HTML5.0版本：iframe 内嵌窗口
（frameset标签不能和body标签同时使用）

tenderbb

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML总结

HTML内容总结了解html各类标签表单，表格，列表了解html1.HTML是什么HTML是超文本标记语言（Hyper Markup Language)，标准通用标记语言下的一个应用，HTML不是一种编程语言，而是一种标记语言（markup language),是网页制作必备。页面可以包含图片，链接，音频，视频···制作不是很复杂，但功能强大，无论使用的是什么类型的电脑或浏览器都可以被浏览到。2.HTML结构详解打开sublime-text–>新建文件–>保存文件（新建一个文件夹
复制链接

扫一扫