码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2021-05-04 16:15:40      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:eset   att   时间   字节   文件的   time   span   速度   应该   

HTML5

超文本标记语言

HTML5 一些新特性:

  • 用于绘画的 canvas 元素

  • video 和 audio 元素

  • 对本地离线存储的更好的支持

  • 新的特殊内容元素,比如 article、footer、header、nav、section

  • 新的表单控件,比如 calendar、date、time、email、url、search

1.基本结构

<!DOCTYPE html>
<html>
   <!-- HTML文档中的注释 -->
   <!-- head:html文档的头部内容 -->
   <head>
       <title>网页的标题</title>
       <meta charset= "utf-8" />
   </head>
   <body>
       <!-- 在网页中显示的内容 -->
       <font color="red">hello,HTML!</font>        
   </body>    
</html>

文档声明语句: <!DOCTYPE HTML>:表示遵循html规范

html文档的标题:<title></title>

设置网页编码:常用的是utf-8和gb2312 <meta charset= "utf-8" />

 

2.基本标签

HTML标签的分类

  • 双标签:有开始标签和结束标签,html、head、body。。等

  • 单标签:单个标签,br、hr、img...等

HTML中的标签是不区分大小写的,建议使用小写

标签中可以使用属性,来设置标签的基本样式,属性需要是键值对,并且值需要用引号引起来

2.1 文件标签

HTML中的最基本的标签

  • html标签:html文件中的跟标签

  • head标签:头部标签,用于设置html一些属性引入其他资源文件(css、JS)

  • body标签:主体标签,用于将内容展示在网页中。

  • title标签:网页标题标签

2.2 文本标签

设置网页中的文本内容

  • h1~h6:标题标签

  • p:段落标签

  • hr:绘制水平线

    • width:宽度

    • size:尺寸

    • algin:对其方式

    • color:颜色

  • br:换行标签

  • font:字体标签

    • color:字体颜色

    • size:字体的大小

  • i:斜体

  • b:加粗

  • del:文本划线删除

  • sup:上标

  • sub:下标

  • div:网页布局标签

  • span:行内布局标签

<!--示例-->
<h1> contents</h1>
<p>contents</p>
<hr align="center" size="5" width="200px" color="red"/>
<font color="aquamarine" size="5">contents</font>
<div id="box">
<span style="color: red;">123121</span>5446
</div>

特殊符号

HTML显示描述
&lt ; < 小于或显示标记
&gt ; > 大于或显示标记
&amp ; & 用于显示特殊字符
&quot ; 引号
&reg ;   已注册
&copy ;   版权
&trade ;   商标
&ensp ;   半个空白位
&emsp ;   一个空白

 

2.3 图片标签

<img src="图片路径" algin="对齐方式" width="宽" height="高" alt="图片无法显示时的提示信息" title="当鼠标悬停时的提示信息" />
<!--路径
相对路径:相对与当前的HTML文档找到文件资源,相对路径没有盘符
.代表当前路径
..当前文件的上级路径(文件夹)
绝对路径
指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
-->

设置图片自身对齐:设置其外层

应用:

<!--设置背景图片
gif 和 jpg 文件均可用作 HTML 背景
如果图像小于页面,图像会进行重复-->
<body background="./img/951247.jpg">    </body>

 

2.4 超链接

<a herf="xxx" target="_blank">超链接</a>
<!--
a:超链接,链接到其他的网页中
target:打开的方式
-- _self,默认值,在当前页面打开
-- _blank:默认值,在空白页面打开
-->
<!-- 锚记点 -->
<a name="top"></a>
<!-- 锚记链接:跳转到网页的某一个锚记点 -->
<a href="#top">top</a>

2.5 列表标签

展示一类数据

  • 有序列表

    • 用于展示排行榜之类的数据

    • ol:有序列表

    • li:列表中的项

  • 无序列表

    • 用于展示导航、同类型的数据信息

    • ul:无序列表

    • li:列表中的项

  • 自定义列表

    • dl:列表

    • dt:一级

    • dd:二级

 

2.6 iframe标签

页面上显示一个单独页面

<!--分开显示不同页面-->
<frameset rows="30%,70%">
<frame src="register.html" >
<frame src="getreg.html" >
</frameset>

 

2.HTML表格

<!--
tr:行
td:单元格显示数据
th:列名
border:边框
cellpadding:边框到内容
cellspacing:边框到边框
-->
<table bgcolor="aliceblue" border="5px" cellspacing="5px" cellpadding="10px">
   <!--
thead标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组
tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
-->
   
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
</table>
<!--合并2列-->
<td colspan="2">Data1</td>
<!--合并2行-->
<td rowspan="2">Data3</td>

 

3.HTML表单

<form action="/" method="post">
<!--表单元素-->
<!--输入框 input:文本、密码、按钮、复选、文件、时间等-->
名字:<input type="text" name="name" id="user" required="required" maxlength="10" placeholder="输入名字" /><br>
单选:<input type="radio" value="1" name="sex"> <input type="radio" name="sex" value="0" /><br>
复选:<input type="checkbox" name="hobby" id="" value="1" />
<input type="checkbox" name="hobby" id="" value="2" />
<input type="checkbox" name="hobby" id="" value="3" />
<input type="checkbox" name="hobby" id="" value="4" />
<!--下拉列表 select: option-->
地址:<select name="address">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>
<!--多行文本 textarea-->
<textarea name="text" rows="2" cols="10">text</textarea>
<input type="submit" value="提交" />
</form>

action为跳转页面

method属性规定如何发送表单数据,分别为get和post:

1.get

  • 数据量要小于1024字节

  • 表单提交数值在地址栏显示,安全性低

  • 不能上传,不支持二进制

  • 速度较快

2.post

  • 数据量不受限制

  • 信息进行了隐藏,安全

HTML

标签:eset   att   时间   字节   文件的   time   span   速度   应该   

原文地址:https://www.cnblogs.com/fremontxutheultimate/p/14726106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!