500字范文 > HTML详细入门（完整版）

HTML详细入门（完整版）

时间：2019-06-16 23:16:19

相关推荐

HTML详细入门（完整版）

文章目录

HTML5学习笔记初识html简介W3C标准网页的基本标签图像、超链接、网页布局图像超链接网页布局列表、表格、媒体元素列表表格媒体元素页面结构结构分析iframe内联框架表单及表单应用表单提交方式文本框和单选框按钮和多选框列表框文本域和文件域搜索框滑块和简单验证表单的应用表单初级验证

HTML5学习笔记

初识html

简介

Hyper Text Markup Language(超文本标记语言)超文本包括：文字、图片、音频、视频、动画等

W3C标准

World Wide Web Consortium 万维网联盟成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构

W3C标准包括

结构化标准语言(HTML、XML)表现标准语言（CSS）行为标准（DOM、ECMAScript）

HTML的基本信息

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body></body></html>

网页的基本标签

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><h1>一集标签</h1><h2>二级标签</h2><h3>三级标签</h3><p>给时光以生命，给岁月以文明。</p><p>我爱你，与你有何相干？毁灭你，又与你有何相干？</p><p>把海弄干的鱼在海干前上了陆地，从一片黑暗森林奔向另一片黑暗森林。</p><br><hr><strong>粗体</strong><em>斜体</em>空格：  >: >< : <版权：&copy</body></html>

图像、超链接、网页布局

图像

常见的图像格式：

jpgGIFPNGBMP

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaTDaYRp-1650796932218)(C:\Users\Leo\AppData\Roaming\Typora\typora-user-images\1650778860499.png)]

<img src="path" alt="text" title="text" width="x" height="y"/>

超链接

<a href="path" target="目标窗口位置">链接文本或者图像</a>

链接的方式：

页面间链接：从一个页面链接到另一个链接

锚链接：

<a name="top">顶部</a><a href="#top">回到顶部</a><a href="otherPage.html#dowm">跳转到其他页面的标记处</a>

功能性链接

<a href="mailto:123@">点击联系我</a>

网页布局

行内元素和块元素

块元素（p、h1-h6…）

无论内容多少该元素独占一行

行内元素（a、strong、em…）

内容撑开宽度，左右都是行内元素的可以排在一行

列表、表格、媒体元素

列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，以列表的样式显示出来，以便浏览这更快捷地获得相应的信息

列表的分类

无序列表有序列表定义列表

<ol><li></li><li></li></ol><ul><li></li><li></li><li></li></ul><dl><dt></dt><dd></dd><dd></dd><dd> </dd></dl>

表格

基本结构

单元格行列跨行跨列

<table border="1px"><tr><td colspan="4">1.1</td></tr><tr><td rowspan="2">2.1</td><td>2.2</td></tr><tr><td>3.1</td><td>3.2</td></tr></table>

媒体元素

视频元素

video

音频元素

audio

<video src="path" controls autoplay></video><audio src="path" controls autoplay></audio>

页面结构结构分析

iframe内联框架

<iframe src="path" name="" frameborder="0" width="x" height="y"></iframe>

表单及表单应用

<form action="" method=""></form><p>名字： <input type="text" name="username"></p><p>密码：<input type="password" name="password"></p><p><input type="submit" ><input type="reset"></body>

表单提交方式

get

可以在url中看到提交的信息，不安全，高效

post

比较安全，传输大文件

文本框和单选框

表单元素格式

<p>性别：<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p>

按钮和多选框

<p><input type="checkbox" value="reading" name="hobby">看书<input type="checkbox" value="movie" name="hobby">看电影<input type="checkbox" value="coding" name="hobby">写代码</p><p>按钮：<input type="button" name="" value=""></p>

列表框文本域和文件域

<p>下拉框：<select name="列表名称" id=""><op value="" select=""></op><op value=""></op><op value=""></op><op value=""></op></select></p>

<p>文本：<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea></p>

<p><input type="file" names="files"><input type="button" value="上传" name="upload"></p>

搜索框滑块和简单验证

<p>邮箱：<input type="email" name="email"></p><p>url:<input type="url" name="url"></p><p>数字：<input type="number" name="num" max="100" min="0" step="10"></p><p>滑块：<input type="range" min="0" max="100" name="" step=""></p><!-搜索框--><p>搜索：<input type="search" name=""></p>

<!-增强鼠标的可用性--><p><label for="mark">点击文字跳转到文本框</label><input type="text" id="mark"></p>