Html小结

最新推荐文章于 2024-07-12 21:49:18 发布

Emotional*

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量113

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/weixin_53283555/article/details/111081484

版权

                       Html小结

1.1 HTML 是用来描述网页的一种语言。它指的是超文本标记语言（Hyper Text Markup Language）。它不是一种编程语言，而是一种标记语言 (markup language)

主要作用：做数据展示

HTML 标签是由尖括号包围的关键词,如<html>
HTML 标签通常是成对出现的,如<b>和</b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

大致结构

        <!DOCTYPE html>
>    `<html lang="en">`
>      <head>
>           <meta charest="UTF-8">
>           <tittle>Document</tittle>
>        </head>
>        <body>
>        </body>
>        </html>

1.2 基础
标题：<h5>标题</h5>

标题

段落：

<p>这是第一段</p>
<p>这是第二段</p>

这是第一段
这是第二段

链接：<a href=“http://www.w3school.com.cn”>This is a link</a>

图像：<img src=“w3school.jpg” width=“104” height=“142” />

1.3组件
Document----文档
Type----类型
lang=language----语言
en----英文
zh-cn----中文
method----请求方式
head表html头的部分，body表html的正文部分
UTF-8—Unicode码（全世界的通用码）
Meta…metadate----源数据
hn----（加粗）标签，表示文本的标题（n的取值范围1-6，其中n越大，字体越小）
1.4表单（form)
注：该标签一般不会单独使用，会和input标签联合使用

<input type=" " name=" ">

引号里边可用：
text----文本框
radio----单选框
select----选择框（多选，使用multiple属性）
textarea----文本域
button----普通按钮
checkbox----多选框
password----密码框
rest----重置按钮
submit----提交按钮

<div>...</div>标签表网页分区的显示
<p>...</p>标签表示对行的控制

1.5属性----路径
action=“url” url表示路径
路径类型：
1.绝对路径：从盘符开始，要描述的文件路径（路径+文件的名称）
2.相对路径：当前源文件和目标文件的相对路径位置

file://D:/code/css/2.html?username=" “&pwd=” "

?----目标文件的结束标识
&----属性连接符
1.6HTTP协议
get请求与post请求的异同
同：两种请求方式都能够让后台接受到数据
异：
get请求-不安全，会把name属性的值暴露在地址栏上，其中地址栏默认大小为64kb
post请求-安全，不会在地址栏上暴露name属性的值
1.7锚点
定义：使网页地展示到达某一个定位的地点（网页跳转）

<a href="#D1"></a>......<a name="D1"></a>

1.8 img标签----表页面上的图片
src属性----source代指的是图片的路径url
alt属性----表示图像的代替文本

<img src="image/1.jpg alt="人物“ width="100%" height="100%">

width----宽度
height----高度（这两个属性可以控制图片的大小，单位可用xxpx或100%）

map和area标签
map----地图、映射
1.9表格布局
定义：通过表格来对网站进行整体的布局
标签
table----表格
tr----表行
th----表头
td----表元
1.10列表
1.10.1无序列表
type=“dsic”----圆
type=“square”----正方形
type=“circle”----圆圈

<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

Link one
Link two
Link three
Link four

若之前加li{diaplay:lnline;} ，则表示横向排列
适应场景：论坛新闻项、展开闭合、导航
1.10.2有序列表

 <ol>
    <li>  </li>
 </ol>

属性：reserse----反转
1.10.3定义列表

<dl>
    <dt>The day of today</dt>
</dl>

1.11字体的控制----跑马灯

<marquee>这波操作666！</marquee>
<marquee behavior="alternate">我来回滚动</marquee> 
    <marquee behavior="scroll">我单方向循环滚动</marquee>
    <marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>            
    <marquee behavior="slide">我只滚动一次</marquee> 
    <marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> 
    <marquee scrollamount="100">我速度很快.</marquee> 
    <marquee scrollamount="50">我慢了些。</marquee> 
    <marquee scrolldelay="30">我小步前进。</marquee> 
    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

1.12html5中的标签（音频和视频）
视频

<vedio src="vedio/final.mp4" contorls="contorls"></vedio>

音频

<audio src="music/(url)" contorls="contorls"></audio>

1.13多窗口框架（一个页面可以显示多个窗口）
4.0版本-多窗口

<frameset>

5.0版本-内嵌窗口

<iframe>

注：若要使用frameset标签，那么它不能和body标签联合使用

<head>
  <framest rows="15%,*,15%">
  <frame src="2.html></frame>
 <frameset cols="25%,*">
  <frame src="3.html"></frame>
  <frame src="4.html"></frame>
</framest>
  <frame src="6.html"></frame>
</framest>

1.13html进化
历程：Html4.0版本----XHTML -------HTML5
Html4.0的版本中语法和规范都不够严谨，不严谨也可以显示出窗口内容，但是语法不够规范，。不是所有的用户都能够看到正确的页面。所以w3c联盟提出了一个版本来规划html的语法、文本头或者是DTD的命名等等 -----XHTML1.0

部门 ----XHTML2.0 语法上做升级
HTML5----功能上做升级