前端学习之 HTML

本贴最后更新于 1716 天前,其中的信息可能已经时移世改

HTML

1、简介

html: hyper text markup language ,超文本标记语言

html 1.0 - 1993-06

html2.0 - 1995-11

html 3.x - 1997-01

html 4.0 -1997-12

html 4.01 - 1999-12

html 5 - 2014-10

2、Html 基本网页结构

格式: xxx.html(推荐) xxx.htm

doctype声明

不区分大小写,容错性很强

乱码问题: 英文和数字在任何编码格式下 都不会有乱码(正常显示的);其他的 都依赖于编码类型。

w3c 规定:标准写法有两种

​ < 标签 ></标签 >

​ < 标签 />

w3c 标准 :

  • 具体的实现产品 html css javascript
  • html 版本
  • html 和 xhtml 的区别
  • html 内容的语义化
<html> <!-- 声明式:不能显示 --> <head> <!-- 设置网页编码 --> <meta charset="utf-8" /> <!-- 关键词: 是否能被搜索引擎搜到 --> <meta name="keywords" content="Java, HTML, CSS" /> <!-- 描述:当搜到本网页时,展示的简介内容... --> <meta name="description" content="Java全栈学习之HTML" /> <!-- 定义网页作者 --> <meta name="author" content="Lyon_Mu"> <!-- 定义网站图标 --> <link rel="shortcut icon" href="./imgs/favicon.ico"> <title>测试页面</title> </head> <!-- 能够显示的 --> <body> my context... 我的内容 </body> </html>

3、基本标签

标题标签

<h1> ... <h6>

段落标签

<p> ..</p>

换行标签

<br/>

水平线<hr>

样式标签

​ 加粗<strong></strong> 或者<b> </b>

倾斜<em></em>

<!-- 能够显示的 --> <body> <p>11111111111111111...</p> <p>2222222</p> <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h6>6级标题</h6> <br /><br /> <hr /> hello world <br /> <strong>hello world</strong> <br /> hello <b>world</b> <br /> <em>hello</em><br /> <em><strong>world</strong></em> <br /> <strong> <em> world </em> </strong> </body>

4、 特殊符号、注释

注释

特殊符号 & ... ;

&nbsp; 空格 & &amp; & and符号,与 “ &quot; “ 引号 © &copy; © 版权标志 ® &reg; » 注册标志 ™ &trade; ™ 商标标志 “ &ldquo; “ 左双引号 ” &rdquo; ” 右双引号 ‘ &lsquo; ‘ 做单引号 ’ &rsquo; ’ 右单引号 « &laquo; « 左三角双引号 » &raquo; » 右三角双引号 ‹ &lsaquo; ‹ 左三角单引号 › &rsaquo; › 右三角单引号 § &sect; § 章节标志 ¶ &para; ¶ 段落标志 • &bull; • 列表圆点(大) · &middot; · 列表圆点(中) … &hellip; … 省略号 | | 竖线 ¦ &brvbar; ¦ 断的竖线 – &ndash; – 短破折号 — &mdash; — 长破折号

5、图片

img

<dl> <dt>这是图片</dt> <dd> <img src="./imgs/th.jpg" width="150px" height="100px" /> </dd> </dl>

6、链接

普通超链接

锚链接

功能性链接: 邮件

顶部超链接

<p><a href="https://cn.bing.com/">必应搜索</a></p> <p><a href="Anchor.html#myAnchor">进入Anchor页面</a></p> <p><a href="mailto:lyonmu@foxmail.com">发送邮件,联系作者</a></p> <p><a href="#top">返回顶部</a></p>

7、列表

无序列表

ul , li

ul 中的元素可以嵌套,li 中可以嵌套 ul

设置列表的标签符号 type="disc|circle|square"

<ul> <li type="circle">我的电脑</li> <ul> <li type="disc">cpan </li> <ul> <li type="square">xxx</li> <li>xxx</li> </ul> <li>Dpan </li> </ul> </ul>
有序列表

ol , li

设置列表的标签顺序 type="1|a|A|i|I"

<li>水果</li> <ol type="1"> <li>香蕉</li> <li>苹果</li> <li>西瓜</li> </ol> <li>语言</li> <ol type="a"> <li>C语言</li> <li>Java语言</li> <li>Python语言</li> </ol> <li>电脑</li> <ol type="A"> <li>Windows</li> <li>Linux</li> <li>Mac</li> </ol> <li>企业</li> <ol type="i"> <li>阿里巴巴</li> <li>字节跳动</li> <li>小米科技</li> </ol> <li>课程</li> <ol type="I"> <li>数据结构</li> <li>算法导论</li> <li>计算机网络技术</li> </ol>
定义列表
<dl> <dt>标题</dt> <dd>正文内容正文内容</dd> </dl>

8、表格

<table border="1px"> <!-- th表头 --> <th>8</th> <th>8</th> <th>8</th> <!--表格table,行tr ,列 td --> <tr align="right"> <td rowspan="2">1-1</td> <td colspan="2" align="center">a</td> </tr> <tr> <td valign="middle">2-2</td> <td>2-3</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td align="center">c</td> </tr> </table>

水平移动 align="left|center|right"

垂直移动 valign="top|middle|bottom"

跨行 rowspan="n"

跨列 colspan="n"

9、表单

<!--method:表单提交方式 get(地址栏显示参数值,默认) , post(不显示,推荐) size: 文本框/密码显示的长度 maxlength:实际能够输入内容的长度 文件:2个一起写, input type="file" enctype="multipart/form-data" 隐藏域:type="hidden"。前台不显示,但真实存在 --> <form action="./Anchor.html" method="get" enctype="multipart/form-data"> <!--表单元素的标注 --> <label for="shenyang">沈阳</label> <input type="checkbox" id="shenyang" /> <!-- 语义化表单--> <fieldset> <legend>用户信息</legend> Helo<input /> Helo<input /> </fieldset> <br /> <br /> <br /> <input type="file" name="file" /> <input type="hidden" value="1"> 认证名:<input readonly="readonly" name="realname" value="穆清" type="text" /> <br /> 用户名:<input name="username" size="10" maxlength="4" value="穆清" type="text" /> <br /> 密码:<input name="password" size="2" type="password" /><br /> 兴趣爱好:<br /> 足球<input checked="checked" name="hobby" type="checkbox"> 篮球<input name="hobby" type="checkbox"> 乒乓球<input name="hobby" checked="checked" type="checkbox"> <br /> 计划旅游的城市<br /> 西安<input name="city" type="checkbox"> 北京<input name="city" checked="checked" type="checkbox"> 上海<input name="city" type="checkbox"> <br /> 性别:<br /> 男<input name="sex" checked="checked" type="radio" /> 女<input name="sex" type="radio" /> <input value="注册" type="submit" /> <input value="恢复默认值" type="reset" /><br /> <input type="button" value="按钮" disabled="disabled" /> <select> <option>西安</option> <option selected="selected">成都</option> <option>深圳</option> </select> <br /> 个人说明:<br /> <textarea cols="30" rows="5"> 这是编写默认值的地方.... </textarea> </form>

10、html5 新支持的表单标签

视频:

<video>:每一个<video>对应一个视频文件; 如果考虑浏览器兼容问题,则可以编写多个视频资源,然后嵌套在一个<video>中 <!-- <video src="./xxx.webm" controls ></video> <video src="./xxx.wvm" controls ></video> <video src="./xxx.mp4" controls ></video> --> <video controls > <source src="./xxx.webm" type="video/webm"/> <source src="./xxx.mp4" type="webm/mp4" /> </video>

音频:

<audio>

注意 type 问题:

一般而言,文件的后缀 就是 type,但个别不一致,如下

<audio controls autoplay > <source src="./xxx.mp3" type="audio/mpeg" /> <source src="./xxx.ogg" type="audio/ogg" /> </audio>

html5 有很多标签自带正则校验

<form action="resources/b.html"> 用户名(必填):<input type="text" required /><br/> 电话(必填):<input type="text" required pattern="^1[358]\d{9}$" /> <br/> <!--type="email"会初步校验 内容是否为邮箱,如果不是 就会终止提交 --> 邮箱(必填):<input type="email" required /><br/> 请输入网址:<input type="url" /><br/> 请输入数字:<input type="number" min="0" max="100" step="10"/><br/> 数字滑块:<input type="range" min="0" max="100" step="10"/><br/> 搜索:<input type="search" placeholder="请输入商品名" /><br/> <input type="submit" value="提交"> </form>

正则表达式:https://www.runoob.com/regexp/regexp-syntax.html

11、页面布局

<body> <header><h1>表示网页的头部 </h1></header> <section><h1>网页中的某一块区域</h1></section> <article>网页的文章</article> <aside>网页的侧边栏</aside> <nav>网页的导航</nav> <footer><h1>表示网页的底部</h1></footer> </body>

12、内联框架 iframe

<a href="https://www.baidu.com" target="my_iframe">点我进百度</a> <a href="https://www.163.com" target="my_iframe">点我进网易</a> <a href="Anchor.html" target="my_iframe">点我进Anchor.html</a> --- <iframe src="https://www.baidu.com" name="my_iframe" width="1200px" height="500px"></iframe> <br/> --- <br/> <a href="https://www.baidu.com" target="_self">点我进百度</a><br/> <a href="https://www.baidu.com" target="_self">点我进百度(在当前页面打开)</a> <a href="https://www.baidu.com" target="_blank">点我进百度(在新窗口中打开)</a> <br/> <iframe src="https://www.baidu.com" name="iframe1" width="1200px" height="500px"></iframe><br/> <iframe src="https://www.163.com/" name="iframe2"></iframe><br/> <iframe src="Anchor.html" name="iframe3"></iframe>

a 标签的值: _blank:新打开一个窗口

_self:在当前页面打开(默认值)

iframe 的 name 值:把当前 a 的 href 值赋值给 iframe 的 src 值

  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖 • 1 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    170 引用 • 513 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...