内容:
<! DOCTYPE html> 声明为HTML5文档
头部元素:<html> <head> <meta charset="utf-8> <titile></title></head>
可见的页面内容:<body> <h1></h1> <p></p></body>
<html>元素是HTML页面的根元素
<head>元素包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容
<h1/2/3/4/5/6>元素定义了一个大标题
<p>元素定义一个段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<titile>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>
<! DOCTYPE>声明有助于浏览器中正确显示页面,doctype声明不区分大小写,能够正确声明HTML的版本,浏览器就能正确显示网页内容
对于中文网页需要使用<meta charset="utf-8">声明编码,否则会出现乱码。有些浏览器(360)会设置GBK为默认编码,则如使用的浏览器为360则需要改成gbk
HTML图像是通过标签<img>来定义的,图像的名称和尺寸是以属性的形式提供的,src是文件的路径,可以使用相对/绝对路径
<img decoding="async" src="/images/logo.png" width="258" height="39" />
Html元素语法:
HTML元素以开始标签起始,结束标签终止,元素的内容是开始与结束标签之间的内容,大多数HTML元素可拥有属性
即使忘记了使用结束标签,大多数浏览器也会正确地显示。
HTml标签对大小写不敏感,<P> = <p> 许多网站都是用大写地HTML标签
但是W3C在HTML4中推荐使用小写,而在未来XHTML版本中强制使用小写
HTML段落
<p></p>来定义一个段落,即使忘记使用</p>结束标签,大多数浏览器也能够正确的将HTML显示出来
HTML拆行:如果希望在不产生一个新段落的情况下进行换行(新行),可以使用<br>标签
<p>这个<br>段落<br>演示了分行的效果
//会将文本分成三段
HTML输出-使用提醒:
对于HTML,无法通过在HTML代码中添加额外的空格或换行来改变输出结果。当显示页面时,浏览器会移除源码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。HTML代码中的所有连续的空行(换行)也被显示为一个空格。
区分 :<br> <br/> <br />(带空格)
<br>是HTML写法,是XHTML1.1的写法,也是XML写法,<br/>是XHTML为兼容HTML的写法,也是XML写法,这三种写法都可以使用,早期发布的 HTML 规范当中,<br> 与 <img> 等元素是不用封闭自身的,但是这种元素造成了 HTML 规范的不严谨,于是在之后发布的 XHTML 语言中,参考了更为严谨的 XML 规范,在这些不用自身封闭的元素后加 / 来表示自行封闭,在逻辑上来讲等同于<br>....</br>(但是没有 </br> 这种写法),这样一来保证了较少的代码量,二来保证了规范的严谨。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
</body>
</html>
HTML中常用的文本格式化
<b></b>/<strong></strong> 表示加粗,区别在于<strong>标签存放的是自认为比较重要的文本
<i></i>/<em></em> 表示倾斜文本,<em>用法与<strong>标签相同
HTML中关于超链接的一些知识
HTML链接是通过标签<a></a>来定义的。在href属性中可以指定链接的地址
<a href="https://www.runoob.com">访问菜鸟教程</a>
<a href="url">链接文本</a> 其中链接文本并不一定是文本,图片或者其他HTML元素都可以成为链接。
target属性:如果不在<a></a>中使用target属性那么当点击目标链接时会覆盖原网页
<a href="www.runoob.com" target="_blank">在新的标签页访问菜鸟网站</a>
HTML中无序/有序列表
<!-- 无序列表-->
<ul>
<li>香蕉</li>
<li>苹果</li>
</ul>
<!-- 有序列表-->
<ol>
<li>张三</li>
<li>李四</li>
</ol>
<!--定义列表-->
<dl>
<dt>张三</dt>
<dd>100</dd>
</dl>
<!-- 张三会顶格显示,100会带缩进-->
HTML中的表格
<!--table-->
<table>
<caption>这是表格的标题</caption>
<tr>
<td>张三</td>
<td>李四</td>
</tr>
</table>
<!--tr表示table row 是表格中的一行,td表示单元格,是真正存放表格数据中的标签-->
<!--HTML 也支持单元格的合并,包括跨行合并和跨列合并。跨行合并使用 rowspan 属性,跨列合并使用 colspan 属性,它们的具体格式如下:-->
<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>
<!--rowspan表示向下合并 colspan表示向右合并 每次合并n个单元格都要少些n-1个td标签,采用左上原则-->
HTML中的input标签
1.文本框:<input type="text" placeholder="用户名">
2.密码:<input type="password" placeholder="密码">
3.单选框:<input type="radio" name="sex">男
<input type="radio" name="sex">女
4.多选框:<input type="checkbox">
5.文件上传:<input type="file">
6.重置按钮:<input type="reset" vlaue="重置账号密码">
placeholder表示背景提示字
单选框需要加name属性才可以真正意义上实现单选,如果需要默认选中则需要加checked
多选框加入checked也可以实现默认选中
文件上传中如果加入multiple属性则可以上传多个文件
form表单域
input标签需要在form域中才能生效
select标签表示下拉菜单,selected表示默认为
<select>
<option>北京</option>
<option selected>上海</option>
</select>
textarea表示文本域,可以设置长宽,但是一般不使用,可以用css来设置
<textarea cols="30" rows="10"></textarea>
div标签/span标签
div:表示没有语义的标签,与普通文字没有任何区别,但是会独占一行
span:与div不同的是,span不会自动换行
在HTML中不会识别多个空格,如果需要可以使用 
补充
在设置input标签的单/多选框时,只有在点到框时才会选中,如果需要点字或者是图片都可以选中的话,可以使用label标签
<label> <input type="radio"> 女 <label>