HTML学习笔记
|
前端

HTML(Hyper Text Markup Language)超文本标记语言

W3C(World Wide Web Consortium)万维网联盟

  • 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
  • W3官网

W3C标准

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

基本概念

HTML5 是超文本标记语言（HTML）的第五次重大修改，可以简单的理解为是 HTML 的第五个大版本
  • 某些情况会将 HTML5 简称为 H5
  • 某些情况说 HTML5（H5）表示的是 HTML 的第五个版本
  • 某些情况说 HTML5（H5）表示的是移动端的网页效果
  • 某些情况说 HTML5（H5）表示的是 HTML5、CSS3、以及 HTML5 配套的 JavaScript 接口。例如操作视频，操作画布，获取地理信息等
  • 某些情况说 HTML5（H5）表示的是手机端整屏的轮播图效果

HTML5 新特性

  1. 布局元素
  2. 媒体元素
  3. 画布（<canvas>），例如刮刮乐。
  4. SVG（定义矢量图）
  5. 表单新特性

网页基本结构

<!--DOCTYPE：告诉浏览器使用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!--网页头部-->
<head>
    <!--  meta描述性标签，用来描述网站的一些信息  -->
    <!--  meta一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="杉秋">
    <meta name="description" content="杉秋的个人博客">

    <!--  网页标题  -->
    <title>Title</title>
</head>

<!--网页主体-->
<body>

</body>
</html>

网页标签

标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落标签
<!--一个p标签就是一段-->
<p>Hello</p>
<p>world</p>
换行标签
<!--虽然换行了，但还是同一段-->
Hello <br>
world <br>
水平线标签
<hr>
字体样式标签
<!--粗体、斜体-->
粗体：<strong>I love you.</strong>
斜体：<em>I love you.</em>
注释和特殊符号
<!--特殊符号-->
空格&nbsp;
大于号&gt;
小于号&lt;
版权符号&copy;
<!--
多行
注释
-->
图像标签
<!--
src:图片地址
alt:加载失败时显示
title:鼠标悬停时的文字
width:宽度
height:高度
-->
<img src="../Gallery.avatar.jpg" alt="Kisou" title="Kisou" width="100">

超链接

页面间链接
<!--
<a href="path" target="目标窗口位置">链接文本或图像</a>
href*:链接路径
target:表示窗口在哪里打开
    _blank 在新标签页打开
    _self 在当前页面打开
    _parent
    _top
-->
<a href="图像标签.html" target="_blank">点击我跳转到图片</a><br>
<a href="基本标签.html" target="_self">
    <img src="../Gallery.avatar.jpg" alt="" width="100">
</a>
锚链接
<!--
1.需要一个锚标记
2.跳转到标记
3.#
-->
<a name="top">顶部</a><br>
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<a href="链接标签.html#down">回到链接标签底部</a>
功能性链接
<!--
邮件链接: mailto:邮箱地址
QQ推广链接
-->
<a href="mailto:1801684146@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1801684146&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1801684146:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
点击联系我
点击这里给我发消息

由于主题css原因点击图片旁边方可跳转

列表

无序列表
  1. JAVA
  2. Python
  3. C++
  4. C#
<!--有序ordered列表list-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>C++</li>
    <li>C#</li>
</ol>
有序列表
  • JAVA
  • Python
  • C++
  • C#
<!--无序unordered列表list-->
<!--
应用范围：导航、侧边栏
-->
<ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>C++</li>
    <li>C#</li>
</ul>
自定义列表
<!--自定义defined列表list-->
<!--
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>语言</dt>

    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>C++</dd>
    <dd>C#</dd>

    <dt>城市</dt>

    <dd>北京</dd>
    <dd>上海</dd>
    <dd>广州</dd>
    <dd>深圳</dd>

</dl>

表格table

  • 表头 thead
  • 表体 tbody
  • 行(row) tr
  • 列 td
  • border:边框
<table border="1">
    
    <thead>
    	<tr>
        	<td colspan ="3">表头</td>
        </tr>
    </thead>
    
    <tbody>
    	<tr>
            <!--colspan 跨列-->
            <td>1.1</td>
            <td colspan="2">1.2</td>
        </tr>
        
        <tr>
            <!--rowspan 跨行-->
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        
        <tr>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </tbody>
   
</table>

媒体元素

<!--视频-->
<!--
src:资源路径
controls:控制条
autoplay:自动播放（目前浏览器规定视频必须静音后才会自动播放）
muted:静音
-->
<video src="../Resources/video/鸡你太美.mp4" controls autoplay muted></video>

<!--音频-->
<audio src="../Resources/audio/鸡你太美.mp3" controls></audio>

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

内联结构

<!--iframe内联框架-->
<!--
src:引用页面地址
name:框架标识名
-->
<iframe src="https://www.kisou.cn" name="haha" frameborder="0" width="500"></iframe>
<!--在a标签中使用target属性从iframe标签打开页面-->
<a href="CSS.md" target="haha">点击跳转CSS</a>

<!--B站分享-->
<iframe src="//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

表单

账号：

密码：

性别： 男 女

下拉框：

爱好： 睡觉 敲代码 打游戏 学习

反馈：

邮箱：

URL：

数字：

音量：

搜索：

按钮： 

<!--表单form-->
<!--
action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
method:规定如何发送表单数据（提交方式）
get:可以在url中看到提交的信息，不安全但高效，不能传输大文件；
post:无法在url中看到提交的信息，比较安全，可以传输大文件。
-->
<form action="test01.html" method="get">
    
    <!--文本输入框：input type="text"-->
    <!--
    value:默认初始值
    maxlength:最多能输入几个字符
    size:文本框长度
	placeholder:输入框为空时的提示性文字
    -->
    <p>账号：<input type="text" name="username" value="admin" maxlength="10" size="30"></p>
    
    <!--密码输入框：input type="password"-->
    <p>密码：<input type="password" name="password"></p>
    
    <!--
	label标签的for属性可以使得点击此label标签时让id=for的标签获得焦点
	-->
    <label for="username">用户名</label>
    <input id="username" type="text" placeholder="用户名">
    
    <!--单选框标签
        input typle="radio"
        value:单选框的值
        name:表示组（name一样表示同一组，同时只能选中一个）
        checked:默认选中-->
    <p>性别：
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female" checked>女
    </p>
    
    <!--下拉框select
        option:选项
        selected:默认选中-->
    <p>下拉框：
        <select name="列表名称">
            <option value="选项的值1">选项1</option>
            <option value="选项的值2">选项2</option>
            <option value="选项的值3" selected>选项3</option>
            <option value="选项的值4">选项4</option>
            <option value="选项的值5">选项5</option>
        </select>
    </p>
    
    <!--多选框input type="checkbox"
        checked:默认选中-->
    <p>爱好：
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="code" checked>敲代码
        <input type="checkbox" name="hobby" value="game">打游戏
        <input type="checkbox" name="hobby" value="study">学习
    </p>
    
    <!--文本域textarea
        cols:列数
        rows:行数
        -->
    <p>反馈：
        <textarea name="response" cols="50" rows="20">在这里填写反馈</textarea>
    </p>
    
    <!--文件域input type="file"-->
    <p>
        <input type="file" name="file">
        <input type="button" name="upload" value="上传">
    </p>

    <!--邮箱input type="email"-->
    <p>邮箱： 
        <input type="email" name="my-email">
    </p>
    
    <!--URL input type="url"-->
    <p>URL：
        <input type="url" name="my-url">
    </p>
    
    <!--数字input type="number"
        max:最大值
        min:最小值
        step:步长
        -->
    <p>数字： 
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

    <!--滑块input type="range"-->
    <p>音量：
        <input type="range" min="0" max="100" name="voice" step="2">
    </p>
    
    <!--搜索框input type="search"-->
    <p>搜索：
        <input type="search" name="search">
    </p>

    <p>按钮：
        <!--普通按钮button-->
        <input type="button" name="btn1" value="点我">
        <br>
        <!--图片按钮image（具有submit功能）-->
        <input type="image" src="../Gallery/button.jpg" name="bn2" width="100">
    </p>
    
    <p>
        <!--提交按钮submit-->
        <input type="submit" value="提交">
        <!--重置按钮reset-->
        <input type="reset" value="清空">
    </p>
</form>
表单应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单应用</title>
</head>
<body>
<form action="test01.html" method="get">
    <p>
        <!--增强鼠标可用性-->
        <!--label标签
        for:要聚焦到的控件的id-->
        <label for="mark">点我聚焦到文本框</label>
        <input type="text" name="text" id="mark">
    </p>
   <p>
       <!--只读readonly-->
       <input type="text" value="只给看，不给改" readonly>
   </p>
   <p>
       <!--禁用disabled-->
       <input type="checkbox" name="a">未选中，可改
       <input type="checkbox" name="a" checked disabled>已选中，只读，改不了
       <input type="checkbox" name="a" checked>已选中，可改
       <input type="button" value="点不了" disabled>
   </p>
   <p>
       <!--隐藏域hidden-->
       <input type="button" value="看不见我但我依然存在" hidden>
       <input type="button" value="看得见我">
   </p>
</form>

</body>
</html>
表单初级验证
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初级表单验证</title>
</head>
<body>
<form action="test01.html" method="get">
    <!--提示信息placeholder-->
    <p>用户名：
        <input type="text" name="username" placeholder="请输入用户名">
    </p>

    <!--必填项required-->
    <p>密码：
        <input type="password" name="password" required>
    </p>

    <!--正则表达式-->
    <p>URL：
        <input type="text" name="url" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]+://[^\s]*">
    </p>
    
    <p>
        <input type="submit">
    </p>
</form>
</body>
</html>

结尾

你已经来到了这篇文章的结尾，希望你享受编程所带来的快乐和学习的旅程

只有启程，才会到达理想的目的地，只有拼搏，才会获得辉煌的成功，只有播种，才会有收获，让信念坚持下去，梦想就会实现

很开心这篇文章能够帮助到大家，如果转载请标注原文地址哦，十分感谢！

版权声明

作者：Kisou
本文链接：https://www.kisou.cn/front/html-studynotes/
共享协议： CC BY-NC-SA 4.0 协议
引用规则:非商业转载及引用请注明出处（作者、原文链接）

HTML笔记
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇