欢迎光临
我的个人博客网站

HTML粗识


HTML学习笔记

目录

初识HTML

HTML:(Hyper Text Markup Language)超文本[1]标记语言

发展史:由HTML4.0 -> XHTML2.0 -> HTML5.0

优势: 1.全球知名浏览器对HTML5的支持 2.市场需要 3.天然跨平台

管理: W3C标准

  1. 由万维网联盟[2]管理

  2. http://www.w3.org/

    http://www.chinaw3.org/

  3. W3C标准包括:

    结构化标准:(HTML,XML)

    表现化标准:(CSS)

    行为化标准:(DOM,ECMAScript)

常见的IDE:IDEA


HTML基本结构

< head >标签为html的头部

< body >标签为html的主体

像< body >< /body >等类似成对存在的标签分别叫开放标签和闭合标签

而像< br/ >只有一个标签的称为自闭合标签。自闭合标签的/是因为习惯而添加的。

网页基本信息如下:

要知道这几个是什么

  1. DOCTYPE
  2. < title> 标签
  3. < meta >标签
<!--DOCTYPE:告诉浏览器我们要使用什么规范,去掉也可以,默认html--> <!--DOCTYPE的意思是Docment Type(文档类型)--> <!DOCTYPE html> <!--html 总标签,内容在这里面写才会显示--> <html lang="en"> <!--head:网页头部--> <head>     <!--meta:描述性标签,一般用来描述我们网站的一些基本信息,一般用来做SEO-->     <meta charset="UTF-8"/>     <meta name="kegwords" content="生命之源"/>     <!--title:网页标题-->     <title>我的第一个网页</title> </head> <!--body:网页主体--> <body> Hallo Werld </body> </html> 

而为html的注释符可用ctrl+/调出


网页基本标签

需要知道这几个是什么

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>2.网页基本标签</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h6>六级标题</h6> <!--段落标题--> <p>这是第一段</p> <p>这是第二段</p> <p>这是第三段</p> <!--换行标签--> 这是第一段 <br/> 这是第二段 <br/> <!--水平线标签--> <hr/> <!--字体样式标签--> <!--粗体:<strong>   斜体:<em>--> 粗体:<strong>这是粗体</stong> <br/> 斜体: <em>这是斜体</em> <!--注释和特殊符号--> <!--特殊符号记忆方式:不需要完全记,下面记住常用的就行,需要其他特殊字符可以百度--> 空格:&nbsp; <br/> 大于符号:&gt; <br/> 小于符号:&it; <br/> 版权所有:&copy; </body> </html> 

段落标签可用快捷键p+ctrl创建


图像标签

需要知道这几个是什么:

  1. 图像标签
  2. 图像标签相关参数
  3. 相对路径和绝对路径

常见的图像格式:JPG,GIF,PNG,BMP

在HTML里面图像标签< img >

<img src="" alt=""> 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>3.图像标签</title> </head> <body> <!--图像标签:<img src="" alt="" title="" width="" hegth="">--> <!-- src:图片地址 alt:图像替代文字 :图像未加载出来的提示文字 title:鼠标悬停时文字 width:图像宽度 height:图像高度 --> </body> </html> 

图像地址分为绝对路径和相对路径

​ 绝对路径:一般从盘符开始的路径为绝对路径(不推荐)

​ 相对路径:用../这样的路径(推荐)


链接标签

要知道这几点:

  1. 链接标签
  2. 文字链接标签和图片链接标签
  3. 锚链接
  4. 功能性标签:qq邮箱标签和邮箱标签
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>4.链接标签</title> </head> <body> <!--链接标签:a标签--> <!--<a href="path" target="目标窗口位置">链接文本或图像</a>--> <!-- href:要跳转的页面 target:表示窗口在哪里打开     _blank:在新窗口打开     _self:在本网页打开 -->     <a href="" target="_blank"></a> </body> </html> 

链接标签分为文字链接标签和图像链接标签

文字链接标签

<a href="https://www.baidu.com/" target="_blank">这个是百度</a> 

图像链接标签

<a href="https://www.baidu.com/" target="_blank">     <img src="<!--这里面是图像地址-->" alt="<!--这里是鼠标提示文字-->"> </a> 

超链接

页面间链接

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

锚标签

  1. 需要一个标记:用name参数
  2. 点击标记:需要一个#号
<a name="top">顶部</a> <a href="#top">点击回到顶部</a>              #页面内跳转 <a href="https://www.baidu.com/#top">点击转到百度</a>   #页面外跳转 

功能性标签

邮箱链接

​ 在href里面输入mailto:XXXX(邮箱地址)点击链接后跳转到邮箱

<!--在mailto后跟上邮箱即可建立邮箱链接--> <a href="mailto:289582531@qq.com">点击跳转到邮件</a> 

QQ邮箱链接

​ 进入qq推广->推广工具


行内元素和块元素

块元素:无论内容多少,该元素占一行,如(p,h1-h6,……)

行内元素:内容撑开宽度,左右都是行内元素,可以排在一行,如(a,strong,em)

简单分辨:输入标签后,不会换行就是行内元素,会换行就是块元素


列表

需要知道一下几点:

  1. 有序列表由什么标签构成
  2. 无序列表由什么标签构成
  3. 自定义列表由什么标签构成

有序列表

​ 由< ol >[3]和< li >标签构成

<ol>     <li>生</li>     <li>命</li>     <li>之</li>     <li>源</li> </ol> 

​ 应用范围:试卷,问卷

无序列表

​ 由< ul >[4]和< li >标签构成

<ul>     <li>生</li>     <li>命</li>     <li>之</li>     <li>源</li> </ul> 

​ 应用范围:导航,侧边栏

自定义列表

​ 由< dl >[5]、< dt >[6]和< dd>标签构成

<!-- dl标签:表示创建自定义列表 dt标签:表示列表名称 dd标签:表示列表内部--> <dl>     <dt>年龄     	<dd>18</dd>     </dt> </dl> 

​ 应用范围:网页底部


表格

要知道以下几点:

  1. 创建表格标签
  2. 表格标签常用参数

为什么用表格:

​ 简单通用

​ 结构稳定

基本结构

​ 单元格,行,列,跨行,跨列

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>6.表格</title> </head> <body> <!--table标签:创建一个表格--> <!--border:表格加边框--> <table border="1px">     <!--tr:行标签-->     <tr>         <!--td:列标签-->         <!--align:设置对称-->         <td>1-1</td>         <td>1-2</td>         <!--colspan:跨列标签-->         <td colspan="3">1-3</td>     </tr>     <tr>         <!--rowspan:跨行标签-->         <td rowspan="2">2-1</td>         <td>2-2</td>         <td>2-3</td>         <td>2-4</td>         <td>2-6</td>     </tr>     <tr>       <td>3-2</td>         <td>3-3</td>         <td>3-4</td>       <td>3-5</td>       </tr> </table> </body> </html> 

视频,音频

须知以下几点:

  1. 音频标签
  2. 视频标签
  3. 相关参数
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>7.视频元素</title> </head> <body> <!--视频标签:<video src="" controls="" autoplay=""></video>--> <!-- controls:控制条 autoplay:自动播放 --> <video src="链接名" controls autoplay></video> <!--音频标签:<audio src="" ></audio>--> <audio src="" controls autoplay></audio> </body> </html> 

页面结构分析

​ 这些元素只是为了语言规范,认识header,footer,nav即可

元素名 描述
header 标题头部局部的内容(用于页面或页面中的一块区域)
footer 标题脚部局部的内容(用于整页面,或页面的一块区域)
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容

iframe:内联框架

​ 一个网站嵌入另一个网页

<!-- iframe:内联框架 src:地址 w-h:宽度,高度 name:框架标识符 --> <iframe src="打开的路径" frameborder="0"></iframe> 

表单语法

​ 通过form标签来实现,表单提供的位置,可以是网站,也可以是请求处理的地址

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>9.表单语法</title> </head> <body> <!-- form:表单标签 method:规定如何发送表单数据     提交方式常用值 get:可以在url看见我们提交的信息,不安全,高效                 post:不可在url看见我们提交的信息,较安全 action:表示向何处发送表单数据 --> <form action="1.我的第一个网页.html" method="post">     <h1>注册</h1>    <p>账号:        <!--文本输入框:text,同时习惯在后面加上name-->        <input type="text" name="username">    </p>     <p>密码:         <!--密码输入框:password-->         <input type="password" name="pwd">     </p>     <!--     单选标签 :radio     初始值:value     指定表单元素名称:name     同时习惯于在标签结束后加上“/”表示标签的闭合     -->     <p>性别:         <input type="radio" value="boy" name="sex" checked/>男         <input type="radio" value="girl" name="sex"/>女     </p>     <!--多选框:checkbox-->     <p>         <input type="checkbox" name="aihao" value="sleep"/>睡觉         <input type="checkbox" name="aihao" value="study"/>学习     </p>     <!--按钮:butten-->     <p>         <input type="button" value="这是按钮"/>     </p>     <!--图片按钮:image-->     <p>         <input type="image"/>     </p>     <p>         <!--提交:submit-->         <input type="submit"/>         <!--重置:reset-->         <input type="reset"/>     </p>     <!--邮件验证:email-->     <p>     <input type="email" name="Email"/>     </p>     <!--URL:url-->     <p>         <input type="url" name="url"/>     </p>     <!--     数字:number     步长:step     -->     <p>         <input type="number" min="0" max="100" step="10">     </p>     <!--滑块:range-->     <p>滑块         <input type="range"/>     </p>     <!--搜素框:search-->     <p>         <input type="search">     </p>     <!--文件域:file--->     <p>         <input type="file" name="file">     </p>     <!--上面全是input标签的表单,下面为其他表单-->     <!--     文本域:textarea     一般文本内容写中文,容易“乱码”     -->     <p>         <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>     </p>     <!--     下拉框标签:select     子标签:option     默认值:selected     -->     <p>下拉框:     <select name="列表名称" >         <option value="选项的值">中国</option>         <option value="选项的值" selected>瑞士</option>     </select>     </p> </form> </body> </html> 

表单元素格式

标签 描述
type 指定元素类型:text;password;checkbox[7];radio[8];submit[9];reset[10];file[11];hidden[12],image[13]和botton[14],默认text
name 指定表单元素名称,Java读取需要读取
value 初始值,type为radio时必须指定
size 初始宽度,当type为text或password时,表单元素大小以字符为单位,对于其他类型,宽度以像素为单位(一般不用)
maxlengh type为password或text时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否被选中,也就是默认选择

表单应用

隐藏域:hidden

只读:readonly

禁用:disabled

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>10.表单应用</title> </head> <body> <!-- 隐藏域:hldden 只读:readonly 禁用:disabled --> <form action="1.我的第一个网页.html">     <p>邮箱:     <input type="email" name="email" hidden>     </p>     <p>搜索框:         <input type="search" readonly>     </p>     <p>图片按钮:         <input type="image" disabled>     </p> </form> </body> </html> 

增强鼠标可用性:label

让文本框前面的字也可点击

    <!--增强鼠标可用性:label-->     <label for="110">点击</label>     <p>邮箱:     <input type="email" name="email"   id="110"> 

表单初级验证

为什么要进行表单验证—>减轻压力

常用方法:

​ placeholder:提示信息

​ required:非空判断

​ pattern:正则表达式


脚注:


  1. 包括文t字,图片,音频,视频等 ↩︎

  2. 一个中立性技术标准机构 ↩︎

  3. ordered list 有序列表 ↩︎

  4. unordered list 无序列表 ↩︎

  5. dir list 自定义列表 ↩︎

  6. dir title 自定义标题 ↩︎

  7. 多选框 ↩︎

  8. 单选框 ↩︎

  9. 提交按钮 ↩︎

  10. 重置按钮 ↩︎

  11. 文件域 ↩︎

  12. 隐藏域 ↩︎

  13. 图片按钮 ↩︎

  14. 普通按钮 ↩︎

赞(0) 打赏
未经允许不得转载:张拓的天空 » HTML粗识
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏