HTML 代码结构
<!DOCTYPE html> 声明告诉浏览器使用HTML5规范来渲染页面
<html></html> 根元素包含整个页面的内容
<head></head>头部元素包含页面的元数据，包括标题和其他信息
<body></body> 内容元素包含页面的主体内容，如文本、图像和其他元素
嵌套
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML 元素嵌套</title></head><body> <h1>HTML 元素嵌套</h1> <section> <h2>蒲帅哥的水果店</h2> <p>每天从农场直供，品质保证，价格实惠。</p> <ul> <li>苹果</li> <li>葡萄</li> <li><a href="https://banana.com/">香蕉</a></li> </ul> </section></body></html>
属性
标签可包含属性，用于提供有关标签的更多信息，出现在标签开始的部分，被包含在尖括号内。
属性和元素名称之间有一个空格
添加在开始标签
元素可以有很多属性
属性通常有一个名称和一个值：name="value"
但并非每个属性都用相同的格式。有的属性可以没有值，称为布尔属性
xxxxxxxxxx<img src="image.jpg" alt="A beaytiful image" />x<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="/Users/pudongbin/Desktop/FullStack/IMG_2017.JPG"/> <title>元素属性</title> <style> h1 { color: pink } </style></head><body> <h1>记录美好时刻</h1> <img src="/Users/pudongbin/Desktop/FullStack/IMG_2017.JPG" alt="日落时刻" width="300" />
<a href="https://www.baidu.com" target="_blank"><h2>百度一下</h2></a>
<button onclick="alert('love you')">可以按</button>
<button onclick="alert('still love you')" disabled>别按</button></body></html>元素分类
块级元素 块级元素在页面上占据一整行，默认情况下，会在其前后换行
独占一行
可以设置宽度和高度
宽度默认是其父容器的100%
可以包含其他块级元素和行内元素
xxxxxxxxxx<div> | <p> | <h1> ~ <h6> | <ul> | <ol> | <li> | <section> | <header>' 等
行内元素 行内元素不会单独一行，只占据其内容所需的宽度
不单独占一行
只能包含文本或者其他行内元素
宽度和高度由内容决定的
xxxxxxxxxx<span> | <a> | <strong> | <em> | <img> | <input> | <label> | <I> | <ront> 等
头部元素
<title>元素用于定义网页的标题，在浏览器标题栏中显示
<meta>元素用于提供关于HTML文档的元数据，比如描述、关键词、作者、字符集等
xxxxxxxxxx<head> <meta charset="UTF-8"> <meta name="description" content="这是个示例网页" /> <meta name="keywords" content="HTML,示例，网页" /> <meta name="author" content="蒲帅哥" /></head><link>rel: 命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分割的列表
href: 指定被链接资源的URL。这个URL可以是绝对的，也可以是相对的
xxxxxxxxxx<!-- 外部样式表 --><link rel="stylesheet" href="style.css"/><!-- 网站图标 --><link rel="icon" href="favicon.ico"/><style>用于在HTML文档内部定义CSS样式xxxxxxxxxx<style>h1 {color: pink}</style>
内容元素
文本类
基础文本类
<h1>H1标题</h1>: h1 ~ h6: 用于定义文档或段落标题p:
<p>这是一个段落</p>用于定义文本段落无元素：纯文本内容也可以不使用元素包裹
文本修饰类
font: 元素用于定义字体相关的内容
strong & b: 用于定义加粗文本
i: 文本斜体
s: 添加删除线
u: 定义下划线文本
mark : 定义高亮文本
sup : 文本上标
sub: 文本下标
big: 标签比周围文本大一号
small: 标签比周围文本小一号
图片元素
src : 图片对应的链接地址，可以绝对路径也可以相对路径
alt : 是图片补充说明，当图片加载失败时用这个来补充图片内容
width: 设置图片的宽度
height: 设置图片的高度
xxxxxxxxxx<img src="图片地址"/><img alt="图片描述" src="图片地址"/><img src="图片地址" width="300" height="300"/>
iframe元素 在网页中嵌入另一个网页内容
xxxxxxxxxx<iframe src="网址" width=" " height=" " frameborder="0" allowfullscreen></iframe>常用属性
src: 用于指定嵌入页面的URL地址
width 和 height: 用于指定页面的宽度和高度
name: 用于给'iframe'命名
frameborder: 用于是否显示iframe的边框
allowfullscreen: 被嵌入的页面是否可以全屏显示
a元素(超链接元素) 用于打开一个新网址
xxxxxxxxxx'<a href="网址" target="">百度一下</a>'target
_self: 在与点击相同的框架中打开链接点文档(默认)
_blank: 在新窗口或选项卡中打开链接文档
_parent: 在父框架中打开链接文档
_top: 在窗口的整个主体中打开链接的文档
framename: 在指定的 iframe中打开链接文档(配合前面的name使用 )
列表类元素
ul: 用于定义无序列表
ol: 用于定义有序表
li: 用于定义列表项
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表类元素</title></head><body><h1>列表类元素</h1><h2>无序列表</h2><ul><li>项目一</li><li>项目二</li><li>项目三</li></ul><h2>有序列表</h2><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol></body></html>
表格类元素
table: 用于创建一个表格
thread: 定义了一组定义表格的列头的行
tbody: 定义表格的内容
tfoot: 定义了一组表格中的各列的汇总行
th: 定义表格内的表头单元格
tr: 定义表格中的一行单元格
td: 定义了表格中的内容单元格
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格类</title></head><body><h1>学生成绩表</h1><table border="1"><thread><tr><th>姓名</th><th>数学</th><th>英语</th><th>总分</th></tr></thread><tbody><tr><td>张三</td><td>90</td><td>85</td><td>175</td></tr><tr><td>李四</td><td>88</td><td>92</td><td>180</td></tr><tr><td>王麻子</td><td>75</td><td>60</td><td>68</td></tr></tbody><tfoot><tr><td colspan="3">班级总分</td><td>600</td></tr></tfoot></table></body></html>
表单类元素
form: 用于定义表单的容器，支持提交数据到服务端
input[text]: 定义文本输入框
input[password]: 定义一个密码输入框
input[email]: 定义一个邮件输入框
input[checkbox]: 定义了一个复选框
input[radio]: 定义一个单选框
input[number]: 定义一个数字输入框
input[button]: 定义一个表单按钮
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1>用户注册</h1><form action="/submit" method="post"><label for="username">用户名</label><input type="text" id="username" name="username" /><br /><br /><label for="email">邮箱</label><input type="email" id="email" name="email" /><br /><br /><label for="password">密码</label><input type="password" id="password" name="password" /><br /><br /><label for="sex">性别</label><input type="radio" id="male" name="sex" /> 男<input type="radio" id="female" name="sex" /> 女<br /><br /><label for="food">喜欢的食物</label><input type="checkbox" id="apple" name="food" /> 苹果<input type="checkbox" id="banana" name="food" /> 香蕉<input type="checkbox" id="pair" name="food" /> 梨<br /><br /><input type="submit" value="注册" /></from></body></html>
万能元素
div: 块级元素，用于将内容分快
xxxxxxxxxx<div><div>如果找不到应该使用哪个元素</div><div>则就用div</div></div>span: 为行内元素，不会改变内容自身样式
xxxxxxxxxx<p>这是一个课堂笔记，接下来内容是重点:<spanstyle="color: red; font-size: 20px">Web前端学习～</span></p>
按钮元素
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮元素</title></head><body><h2>表单按钮</h2><input type="button" value="表单按钮"><h2>普通按钮</h2><button>点击我</button><h2>图片按钮</h2><button><img src="/Users/pudongbin/Desktop/FullStack/IMG_2017.JPG" alt="图标" width="50" style="vertical-align: middle;" /><span>学习 HTML</span></button><h2>点击事件</h2><button onclick="alert('hello, html')">执行代码</button></body></html>其他元素
br: 换行元素，用于在文本中插入一个换行符
xxxxxxxxxx<p>这是第一行 <br />这是第二行</p>hr: 水平线元素，用于在页面中插入一条水平线，通常用于分隔内容
xxxxxxxxxx<p>这是第一部分内容</p><hr /><p>这是第二部分内容</p>