html笔记
1.基本概念
(1)W3C（Wrold Wide Web Consortium）万维网联盟，是Web技术领域最权威和具有影响力的国际中立性技术标准机构。
W3C标准包括：
- 结构化标准语言（HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
(2)HTML的英文全称是Hyper Text Markup Language（超文本标记语言），是一种标记语言。HTML是网页制作所必备的，主要是用来设计网页的结构。
2.HTML的基本结构
<!-- ！DOCTYPE后面是文档类型，告诉浏览器我们使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签：网页头部-->
<head>
<!--meta标签：描述性标签，描述网站的一些信息，一般用来做SEO -->
<meta charset="UTF-8">
<!-- title标签:网页头部的标题-->
<title>标题</title>
</head>
<!--body标签：网页主体-->
<body>
网页的主体部分
</body>
</html>
- 在成对出现的标签中如,分别称为开放标签和闭合标签。
3.基本标签
-
标题标签
<h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6>
标题标签共有六个级别，不同级别显示大小不同的标题，h1最大，往下依次减小。
-
段落标签
<p>第一个段落</p> <p>第二个段落</p>在p标签内无论内容多少，该元素独占一行，属于块元素。
-
换行标签
1111111 <br/> 2222222<br/>
即1111111单独显示在一行，2222222显示在下一行
-
水平线标签
<hr>
效果如下：
这是第一段
这是第二段
这是第三段
-
字体样式标签
<strong>粗体：字体样式</strong> <em>斜体：字体样式</em> -
注释
<!--段落标签--> <!--水平线标签-->
可以使用快捷键Ctrl+/进行注释
-
特殊符号
 表示空格，>表示大于号，<表示小于号
补充说明：
块元素：无论内容多少，该元素独占一行
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，比如：a,strong,em
4.图像标签
<img src="..\resources\images\1.png" alt="huang" title="学习" width="300" height="300">
-
src=“图像路径”,该属性是img标签的必填属性。图像路径可以分为相对路径和绝对路径。相对路径就是相对于当前文件的路径,如…\resources\images\1.png（…/表示上一级），一般推荐该方式，因为其比较简短，灵活，本机测试时比较方便。
-
alt=“图像的替代文字”，该属性是img标签的必填属性，其效果是当找不到图像时显示出图像的替代文字。
-
title=“文本” 表示当鼠标悬停在图像上时，可以显示出自己设置的提示文字
-
width=" " 表示图像的宽度，height=" "表示图像的高度
以上只是列出常用的属性，可以根据具体情况添加img标签的属性。
3.超链接标签
<!--a标签
href=“网站地址”，表示需要跳转到的网站，该属性是a标签中的必填属性
target="",表示需要跳转的页面在哪里打开， 常用的属性：_blank表示在新标签中打开，_self表示在当前页面打开-->
<a href="https://www.baidu.com" target="_blank">点击此处跳转到百度页面</a>
-
锚链接
<!--锚链接：实现页面间的跳转 比如：点击目录可以跳到对应的内容 首先需要一个锚标记top，然后写出跳转标记#top --> <a name="top">顶部</a> <a href="2.html" target="_self" ><img src="..\resources\images\1.png" alt="huang" title="学习" width="300" height="300"> <p> <a href="2.html" target="_self" ><img src="..\resources\images\1.png" alt="huang" title="学习" width="300" height="300"></a> </p> <a href="#top">回到顶部</a> -
功能性链接
<!--功能性链接：比如点击链接即可联系 邮件链接：mailto --> <a href="mailto:123445567@qq.com">点击联系</a>
4.列表标签
-
有序列表
<!--有序列表:可以自动生成顺序 范围：试卷，问答等 --> <ol> <li>java</li> <li>c#</li> <li>c++</li> <li>python</li> </ol>效果如下：
- java
- c#
- c++
- python
-
无序列表
<!--无序列表 范围：导航、，侧边栏等 --> <ul> <li>111</li> <li>222</li> <li>333</li> </ul>效果如下：
- 111
- 222
- 333
-
自定义列表
<!--自定义列表
dt表示列表的名称，dd表示列表的内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c</dd>
<dt>分数</dt>
<dd>90</dd>
<dd>80</dd>
<dd>70</dd>
</dl>
效果如下：
-
学科
- java
- python
- c 分数
- 90
- 80
- 70
5.表格标签
<!--table标签，tr代表行，td代表列，border表示添加边框
rowspan=“2”表示跨行，独占2行
colspan="3"表示跨列，独占3列
-->
<table border="1px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">赵凯</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
效果如下：
| 学生成绩 | ||
| 赵凯 | 语文 | 100 |
| 数学 | 100 | |
6.媒体元素
<!--设置音频和视频
src=“资源路径”，controls表示控制条，必须要设置，否则无法控制播放，
autoplay表示自动播放
-->
<video src="../resources/videos/1.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
7.页面结构分析
在body标签内又可以分为网页的头部、网页的主体部分和网页的底部。
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
8.表单语法
<!-- 表单标签form
action=“地址”表示的是表单提交的位置，可以是网站，也可以是一个请求地址；method=“表单提交的方式”，有post,get两种属性
get方式提交：我们可以在url（网页定位地址）中看到我们提交的信息，高效但不安全； post:比较安全，可以传输大文件-->
<form action="5列表标签.html" method="get"><form>
-
文本输入框
<!--文本输入框:input type="text"，value代表文本框内的默认初始值，maxLength表示最长能写几个字符，size表示文本框的长度 readonly表示只读，不能修改--> <p>名字：<input type="text" name="username" value="huang" readonly maxlength="8" size="30"></p>
名字：
-
密码输入框
<!--密码框：input type="password" value="12345"默认密码，hidden表示隐藏（密码框不见了）--> <p>密码：<input type="password" name="pwd" value="12345" hidden></p> -
单选框
<!--单选框标签：input type="radio"，value表示单选框的值，name相同表示是同一组，checked表示默认选中， disabled表示禁用--> <p>性别： <input type="radio" value="boy" name="sex" disabled/>男 <input type="radio" value="girl" name="sex" checked/>女 </p> -
多选框
<!-- 多选框标签：input type="checkbox",value,name(这三个属性必须得写出来)--> <p>爱好： <input type="checkbox" value="sleep" name="hobby" checked>睡觉 <input type="checkbox" value="html" name="hobby">网页学习 <input type="checkbox" value="java" name="hobby">java <input type="checkbox" value="chat" name="hobby">聊天 </p> -
按钮
<!--按钮标签 input type="button"普通按钮,input type="image"图像按钮,input type="submit"提交按钮,input type="reset"重置按钮 value表示给表单按钮赋值--> <p>按钮 <input type="button" value="请点击"> <input type="image" src="../resources/images/1.png"> </p> -
下拉框
<!-- 下拉框，列表框,value值的作用是在后台可以查看，selected表示默认选中--> <p>国家： <select name="列表名称" > <option value="China" selected>中国</option> <option value="England">英国</option> </select> </p> -
滑块
<!-- 滑块:input type="range"可以表示音量等,一定要设置name属性，min:表示最小值，max:表示最大值 step=“2”表示每次变化2 --> <p>音量： <input type="range" name="voice" min="0" max="100" step="2"> </p> -
文本域
<!--文本域 cols表示行数，rows表示列数--> <p>反馈： <textarea name="textarea" cols="1" rows="2">文本内容</textarea> </p> -
验证
<!--数字验证 placeholder=“提示的信息”，required用于非空判断，表示必填，不能为空。--> <p>数字验证(商品数量)： <input type="number" name="num" max="100" step="2" placeholder="请输入数字" required> </p>
数字验证(商品数量)：
<!--自定义邮箱 pattern后接正则表达式
查找正则表达式网址：https://www.jb51.net/tools/regexsc.htm-->
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
