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

HTML

时间:2019-12-19 19:04:55      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:head   原创   checked   特殊   浏览器   pat   数字   功能   有序   

HTML的基本结构

所有HTML标签都以<>开头 以</结尾>,自闭合标签<></>都可;

网页中内容都需在< body> 标签中;

<meta name="keywords" content="***,*“><!--网站关键字描述-->
<meta name="description" content="***"><!--网站描述-->
<!--注释-->

1. 网站的基本标签

1.标题标签h1~h6
2.段落标签 <!--p:段落标签-->
3.换行标签
4.水平线标签<hr/>
5.字体样式标签<strong>,<em>
6.特殊符号标签 &nbsp空格,&gt大于,&lt小于,&copy版本符号

2.图像标签

<img src="图片:图片的路径" alt="图片描述" title="鼠标放在图片上的悬浮提示" width="宽" height="高">

3.超链接

1.基本使用
<!--<a href="跳转地址" target="目标打开的窗口">链接名:文本</a>-->

target: _self : 本窗口打开 ? _blank: 新窗口打开

2.锚链接

用于页面间指定位置跳转

锚点:<a name="mark"></a

同一页面跳转到锚点

<a href="#mark">链接名</a>

不同页面中跳转到锚点

<a href="***.html#mark">链接名</a> 

 

3.功能性标签

邮件链接

<a href="mailto:邮箱">链接名【联系我们】</a>

4.块元素,行内元素

块元素:独占一行

行内元素:由内容长度决定行数

<!DOCTYPE html><!--DOCTYPE文档类型  默认声明浏览器该网页使用规范-->
<html lang="en">
<head>
   <meta charset="UTF-8"><!--描述信息-->
   <title>八戒个人简介</title>
</head>
<body>
<h1>猪八戒</h1><hr>
<a href="#mark1" >基本信息</a>
<a href="#mark2">人物介绍</a>
<a href="#mark3">使用武器</a>
<a href="https://p1.ssl.qhimg.com/t0155bf12a1613f6e52.jpg"target="_blank">回眸照</a>
<p><a name="mark1"></a>....</p>
<p><a name="mark2"></a>....</p>
<p><strong><a name="mark3"></a>....</strong></p>
</p>    
</body>
</html>

列表

无序列表ul-li

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>无序列表</title>
</head>
<body>
<ul>
   <li><a href="https://music.163.com/discover/toplist?id=19723756"target="_blank">云音乐飙升榜</a></li>
   <li><a href="https://music.163.com/discover/toplist?id=3779629"target="_blank">云音乐新歌榜</a></li>
   <li><a href="https://music.163.com/discover/toplist?id=2884035"target="_blank">网易原创歌曲榜</a></li>
   <li><a href="https://music.163.com/discover/toplist?id=3778678"target="_blank">云音乐热歌榜</a></li>
</ul>
</body>
</html>

 

有序列表ol-li

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>有序列表</title>
</head>
<body>
<ol>
   <li><a href="https://music.163.com/#/song?id=1409382131" target="_blank"><img src="http://p2.music.126.net/my-6EO4NatR8PaW5eL7QQw==/109951164546930698.jpg?param=50y50&quality=100"></a></li>
   <li><a href="https://music.163.com/#/song?id=1405283464" target="_blank"><img src="http://p2.music.126.net/StMr9-QujuAQkOlBZ1BGtA==/109951164503111693.jpg?param=50y50&quality=100"></a></li>
   <li><a href="https://music.163.com/#/song?id=1404885266" target="_blank"><img src="http://p2.music.126.net/Aj4X1kpV-C2LLi-e_Xhgvg==/109951164499744148.jpg?param=50y50&quality=100"></a></li>
</ol>
</body>
</html>

自定义列表dl-dt-dd

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>自定义列表</title>
</head>
<body>
<dl>
   <dt>云音乐特色榜</dt>
   <dd>云音乐飙升榜</dd>
   <dd>云音乐新歌榜</dd>
   <dd>网易原创歌曲榜</dd>
   <dd>云音乐热歌榜</dd>
</dl>
</body>
</html>

 

表格

优点:结构简单,通用

基本结构:

表格 table

行 tr

列 td 跨行rowspan 跨列colspan

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>流量统计表</title>
</head>
<body>
<table border="2px">
   <tr>
       <td>流量统计</td>
       <td>访客统计</td>
       <td>会员</td>
       <td>游客</td>
   </tr>
   <tr>
       <td>*</td>
       <td>*</td>
       <td>*</td>
       <td>*</td>
   </tr>
   <tr >
       <td rowspan="2"></td>
       <td>*</td>
       <td>*</td>
       <td>*</td>
   </tr>
   <tr>
       <td>*</td>
       <td>*</td>
       <td>*</td>
   </tr>
   <tr>
       <td>平均浏览量</td>
       <td colspan="3"></td>
   </tr>
</table>
</body>
</html>

音频、视频

音频 audio

视频 video

src:路径

controls: 提供播放按钮,进度条、下载按钮、全屏按钮、音量控制

autoplay: 自动播放

loop: 循环播放

 

两种方式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>视频</title>
</head>
<body>
<video src="..\教父2.BD1280高清中英双字版.mp4"  controls autoplay>
   <video src="..\教父2.BD1280高清中英双字版.mp4"  controls autoplay>
</video>
</body>
</html>
</video>
<video controls autoplay>
  <source src="..\教父2.BD1280高清中英双字版.mp4">
</video>

 

网页结构分析

页面的头部

页面的主体

页面的尾部

HTML5新增的结构标签:行业规范,无实际作用

(1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;[独立区域]
(2)article:特殊独立区块,表示这篇页眉中的核心内容;[文章主题]
(3)aside:标签内容之外与标签内容相关的辅助信息;[侧边栏]
(4)header:某个区块的头部信息/标题;
(5)hgroup:头部信息/标题的补充内容;
(6)footer:底部信息;
(7)nav:导航栏
(8)figure:独立的单元,例如某个有图片与内容的新闻块。

内联框架

iframe:内联框架

src: 地址

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com/" frameborder="0"></iframe>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>内联框架</title>
</head>
<body>
<iframe name="name" frameborder="0"></iframe>
<a href="https://www.baidu.com/" target="name">显示内联框架</a>
</body>
</html>

表单

基础表单
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>基础表单</title>
</head>
<body>
<!--method="get":携带参数,参数可以在url中看到,不安全,大小有限-->
<!--method="post":参数不可见、安全,大小没有限制[表单提交常用方式]-->
<!--form 表单
       action:提交地址
       method:提交方式
   input 标签
       type:
           text :   文本框
           password: 密码框
           submit:   提交按钮
           reset:   重置
      name:录入的名称[必须写]
-->
<form action="提交地址.html" method="get">
   <p>用户名:<input type="text" name="username"></p>
   <p>密码 &nbsp;&nbsp;&nbsp;:<input type="password" name="password"></p>
   <p>
       <input type="reset" value="重置">
       <input type="submit" value="提交">
   </p>
</form>
</body>
</html>
表单元素
所有表单元素都要写在form表单中

1.文本框

<!--文本框:type="text"
   value :文本框默认值
   size :文本框的长度
   maxlength: 文本框的最大输入长度
-->

2.密码框

<!--密码框 type="password"-->

3.单选按钮

<!--单选框type="radio"
value:表单提交的值
name:名字相同,则自动分组,必须要分组
checked:默认选中
        disabled:禁用
注意事项:默认没有值,需要再input type="radio" 后增加单选框的属性
-->

4.复选框

<!--多选框 type="checkbox"
同单选
注意事项:默认没有值,需要再input type="checkbox" 后增加多选框的属性
-->

5.下拉列表框

select-option

<!--下拉列表框
select
name: 组件名字 必填
size: 显示的数量,默认为1
?
option: 选项
value 必填
option标签中间写下拉框的值
selected: 默认选中
-->

6.按钮

普通按钮和javascript结合使用[button]

<!--按钮type="button"
submit
reset
value:按钮上的文字
type="image"
        src:图片的路径
-->

7.文本域

<!--文本域  cols宽  rows高-->

8.文件域

<!--type="file"
表单,需要支持提交复杂文件 enctype="multipart/form-data"
-->

9.邮箱

<!-- type="email"-->

10.网址

<!-- type="url"-->

11.数字调节

 <!--数字: type="number":计数
   最小值 min=""
   最大值 max=""
   步长   step="步长"
   -->
eg:<input type="number" min="0" max="100" step="11">有效值为0,11,21....91;

12.滑块

<!--滑块 type="range"
默认值0~100
min,max,step
-->
初始在中间

13.搜索框

<!--搜索框name="search"-->
(带关闭按钮)

 

表单的应用

1.隐藏域

type="hidden"

2.只读和禁用

readonly、disabled

3.标注

 <!--通过 for="name" 来链接到 表单中的指定ID -->

 

初级表单验证

是为了减轻服务器的压力,主要在 JavaScript 以及 后台判断

  1. 默认提示

    placeholder=""
  2. 必填

    required
  3. 正则表达式

    pattern="^1[358]\d{9}"

 

基本使用
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>文本框</title>
</head>
<body>
<form action="提交地址.html" method="get" target="_blank">
   <p>
      用户账号:<input type="text" name="username" value="123456" size="20" maxlength="11" readonly>
   </p>
   <p>
      用户密码:<input type="password" name="password" value="" size="20" maxlength="11" required>
   </p>
   <p>
      性别:<input type="radio" value="男" name="sex" checked>男
       <input type="radio" value="女" name="sex">女
   </p>
   <p>
      特长:<input type="checkbox" name="hobby" value="sleep">入眠快
       <input type="checkbox" name="hobby" value="eat">吃饭快
       <input type="checkbox" name="hobby" value="leg" disabled>腿特长
   </p>
   <p>
      路线:<select name="path" size="1">
           <option value="1">上路</option>
           <option value="2">中路</option>
           <option value="3">下路</option>
           <option value="4">打野</option>
           <option value="5">辅助</option>
       </select>
   </p>
   <p><input type="button" value="按钮"></p>
   <p><textarea name="textarea" cols="100" rows="10"></textarea></p>
   <p>选择上传文件:<input type="file" name="文件"></p>
   <p>邮箱:<input type="email" name="email" id="name"></p>
   <p>网页链接:<input type="url" name="url" placeholder="保证网页是正常可用的"></p>
   <p>数量:<input type="number" min="0" max="100" step="10"></p>
   <p>
      调节数量:<input type="range" name="range" min="0" max="100" step="1">
   </p>
   <p>搜索: <input name="search"></p>
   <p><label for="name">指向邮箱</label></p>
   <p>
       <input type="reset" value="重置">
       <input type="submit" value="提交">
   </p>
</form>
</body>
</html>

 技术图片

HTML

标签:head   原创   checked   特殊   浏览器   pat   数字   功能   有序   

原文地址:https://www.cnblogs.com/arroa/p/12069439.html

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