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

超文本意味着，加入图片、声音、动画等多媒体内容

web标准包括以下三方面

结构：对网页元素进行整理与分类，主要为HTML

表现：设置网页元素大小、颜色、等外观样式，主要为CSS

行为：网页模型的定义以及交互的编写，主要为JavaScript

————————————————————————————————

HTML标签

标签是由尖括号<>包围的关键词，例如<html>

大部分标签成对出现，例如<html></html>,有少部分的单标签，例如<br />

标签之间的关系：包含与并列

包含：

　　<html>

　　　　<title></title>

　　</html>

并列：

　　<head></head>

　　<body></body>

 页面基础骨架

<html>

　　<head>

　　　　<title>网页标题</title>

　　</head>

　　<body>

　　网页内容

　　</body>

</html>

_____________________________________________

使用VSCode工具开发网页

在新建文件保存为html格式后，输入！即可创建基本窗体骨架

 

 右键Open in Default Browser即可预览（没有选项 就去扩展页面下载插件）

记得文件保存后才生效

——————————————————————————————————

<!DOCTYPE>文档类型声明，作用是告诉浏览器用哪种HTML版本显示网页

<!DOCTYPE>声明位于文档中的最前面

<!DOCTYPE>不是一个html标签

lang="en"即示意本网页为英文网页 lang="zh-CN"即为中文

charaset="utf-8"即字符集采用utf-8

标题标签

<h1></h1>到<h6></h6>  h1最为重要

段落标签

<p>文本在一个段落中会根据浏览器窗口大小自动换行</p>

换行标签

<br />

<strong>加粗标签</strong>

<em>倾斜标签</em>

<del>删除线</del>

<ins>下划线</ins>

 

<div></div>和<span></span>为方框布局组件无语义

div为大盒子一行只能放一个

span为小盒子,一行可以多个

图像标签

<img src="....."/ title="鼠标悬停时的提示文本" weight=100 height=100>

<img alt="图片显加载不出来的时候 显示此文字" border=15>

超链接标签

<a href="跳转到的url" target=“目标窗口弹出方式”>文本或图像</a>

target=“_self”在当前页面打开  target="_blank"在新窗口打开

链接分类

外部链接：http：//www.baidu.com

内部链接：index.html

空链接：<a href="#">

下载链接:文件名

锚点链接：点击链接可以定位到页面某个位置

　　点击链接标签为：<a href="#two">第二季</a>

　　目标处标签为：<h3 id="two">第二季介绍</h3>

——————————————————————————

表格

<table>

　　<tr><td>单元格内文字</td></tr>

　　<tr><td>二行一列</td><td>二行二列</td></tr>

</table>

tr代表表格中的行

<th>表头单元格：文字居中加粗显示</th>

写在table标签内的表格属性

align=left,center,right表格在页面显示的位置

boarder=1,“”表格的边框，默认为“”即没有边框

cellpadding 单元格内容到边缘的距离

cellsapcing 单元格之间的间距

width表格宽度

height表格高度

 

<thead>表格的表头区域

<tbody>表格的主体区域

应用如下

<table>

　　<thead><tr><th></th></tr></thead>

　　<tbody><tr><td></td></tr></tbody>

</table>

合并单元格步骤

1、确定跨行还是跨列合并

2、在目标单元格添加语句

3、删除多余单元格

<table width=500 height=249 border="1" cellspacing="0">

　　<tr>

　　　　<td colspan="3"></td>

　　</tr>

　　<tr>

　　　　<td></td>

　　　　<td rowspan="2"></td>

　　　　<td></td>

　　</tr>

　　<tr>

　　　　<td></td>

　　　　<td></td>

　　</tr>

</table>

____________________________________________________________

无序列表

<ul>

　　<li>无序列表项1</li>

　　<li>无序列表项2</li>

</ul>

有序列表

<ol>

　　<li>有序列表项1<li>

　　<li>有序列表项2<li>

</ol>

自定义列表

<dl>

　　<dt>带头，dl是大佬</dt>

　　<dd>小弟</dd>

　　<dd>小弟</dd>

　　<dt>带头，dl是大佬</dt>

　　<dd>小弟</dd>

　　<dd>小弟</dd>

</dl>

_________________________________________________________

表单

表单域是一个包含表单元素的区域

<form>标签用于定义表单域，实现用户信息收集与传递

<form>会把范围内的表单元素信息提交给服务器

<form action=“url地址,服务器程序的” method=“表单数据提交方式” name="表单域名称">

　　各种表单元素控件

</form>

 

input表单元素，用于收集用户信息

<input type="属性值" />

type决定输入字段形式（复选框，文本，单选.......）

name属性 同一名字 控件才可以配套 比如单选按钮

value属性

checked属性 checked="checked"设置为已选中状态

maxlength属性

 <form>

　　用户名：<input type="text"> <br>

　　密码：<input type="password"> <br>

　　性别：男<input type="radio"> 女<input type="radio"> <br>  

　　爱好：吃饭<input type="checkbox> 睡觉<input type=“checkbox”>

　　<input type="submit" value="免费注册">此为提交按钮 可以吧表单域form里面的表单元素的值提交给后台<br>

　　<input type="reset" value="重新填写">重置按钮还原表单元素默认值<br>

　　<input type="button" value="普通按钮">需要结合js<br>

　　<input type="file">上传文件按钮<br>

　　籍贯(下拉列表框)：<select>

　　　　<option selected="selected">北京(默认)</option>

　　　　<option>天津</option>

　　　　<option>河北</option>

　　</select>

　　<textarea>

　　此处为留言框

　　</textarea>

</form>

————————————————————————————————————————

label标签，用于绑定一个表单元素，点击label文本时，自动选中表单元素

例子：

　　<label for="sex">男</label>

　　<input type="radio" name="sex" id="sex">

label的for和表单元素的id需要相同

————————————————————————————

tip：

相对路径中的上一级路径为../

注释语句为<!--注释语句-->（快捷键为ctrl+/）

空格符为&nbsp;（no-break space）

————————————————————————————————

引用：

https://www.bilibili.com/video/BV14J4114768?p=4