1.基本结构标签
<html></html>为最大标签,称为根标签
<head></head>文档头部 --- <title></title>网页标题,放在head里面
<body></body>文档主题内容
<h1>-<h6>一到六级标题
<p></p>段落标签
特点:(1)文本在一个段落中会根据浏览器的窗口大小自动换行。
(2)段落与段落之间保有间隙。
<br>单标签,强制换行,和<p>换行不一样的是,<br>换行时,行与行之间没有间隔
要加粗哪个把哪个夹在中间
<strong></strong>\<b></b>粗体
<em></em>\<i></i>倾斜
<del></del>\<s></s>删除线
<ins></ins>\<u></u>下划线
<div></div>和<span></span>都是用来布局的
区别是一行只能放一个div,但是可以放多个span
所以div会自动换行,span不会
<meta>
标签用于定义元信息(metadata),这些信息不是直接显示在网页上的内容,而是提供给浏览器和其他搜索引擎的信息。<meta>
标签通常放置在 <head>
部分,用于描述文档的各种元数据。
常见用途:
<meta charset="utf-8">
2.图像标签
<img src="图像的地址"/>
图片需要和HTML的文档存储在一起。
例如:
<img src="图像名称">
<img src="文件夹名/图片名">
<img src="../图片名">
绝对路径:
绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例:"D:\wed\img\logo.gif"或完整的网络地址
3.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本/图片</a>
点击图片/文字即可进行跳转。
href 用于指定链接目标的URL地址(必须属性)
target 用于指定链接页面打开的方式,_self为默认方式在此页面直接跳转,_blank在新的窗口打开
(1)外部链接
例:<a href="http://www.baidu.com">百度</a>
(2)内部链接
网站内部页面之间的相互链接。
直接在href=" "在引号之中直接写自己所书写的html文件的文件名即可跳转。
3)空链接(#)
空链接是占位的链接。
<a href="#"></a>
(4)下载链接
<a href="压缩包的名字">名字</a>
(5)网页元素链接
<a href=" "> <img src="地址"> </a>
6)锚点链接
是使用在一个网页中,内容太长不好寻找指定内容是所设置的链接,可直接找到想要查找的内容。
在href属性中,设置属性值为#名字的形式。
如:<a href="#two">第二</a>
找到目标位置标签,咋里面添加一个id属性=设置的名字即可
如:<h3 id="two"> 第2集</h3>
4.注释标签
<!--注释--> 快捷键为ctrl+/
5.特殊字符
空格 |   |
< | < |
> | > |
6.表格标签
基本语法:
<table>
<tr> 表示一行
<td>表示一个单元格</td>
......................................
</tr>
.....................................
</table>
表格结构标签
<thead>头部和<tbody>主体
合并单元格
1.跨行合并 rowspan='合并个数'
2.跨列合并 colspan='合并个数'
7.无序列表
<ul>里嵌套<li>
8.有序列表
<ol>里嵌套<li>
9.自定义列表
<dl>定义描述列表 <dt>定义项目名字 <dd>描述每一个名字
注意:
1.dl中只可以包含<dt>,<dd>其中两个为兄弟关系。
2.<dt>和<dd>个数无限制,经常一个<dt>包含多个<dd>
示例:
<dl>
<dt>陶喆:</dt>
<dd>天天</dd>
<dd>沙滩</dd>
<dt>周杰伦</dt>
<dd>晴天</dd>
<dd>你听得到</dd>
</dl>
10.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://search.jd.com/search">
账户:<input type="text" name="account" value="Nozomi" maxlength="10"><br>
<button>确认</button>
</form>
</body>
</html>
在text中,value为默认值,maxlength为文本框的最大输入
在其它type中,value有着不同作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://search.jd.com/search">
账户:<input type="text" name="account" value="Nozomi" maxlength="10"><br>
密码:<input type="password" name="pwd" value="" maxlength="8"><br>
<button>确认</button>
性别:
<!-- 单选框为radio,name和value相当于键值对,体现在url上,checked为默认选中 -->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="famale">女
<br>
爱好:
<!-- 多选框为checkbox -->
<input type="checkbox" name="hobby" value="badminton">羽毛球
<input type="checkbox" name="hobby" value="riding">骑行
<input type="checkbox" name="hobby" value="table tennis">台球
<!-- 用户不可见,提交表单时,携带的一些固定的数据 -->
<input type="hidden" name="tag" value="100">
<!-- 确定按钮 第一种写法 这里button就算不写type,也是提交按钮,默认有-->
<button type="submit">确定</button>
<!-- 确定按钮 第二种写法 value值在这里体现为按钮上的提示文字-->
<input type="submit" value="确定">
<!-- 重置按钮 第一种写法 -->
<button type="reset">重置</button>
<!-- 重置按钮 第二种写法 -->
<input type="reset" value="重置">
<!-- 普通按钮-指的是不会提交也不会重置的按钮 type必须要写,不然默认为submit -->
1.
<button type="button">普通按钮</button>
2.
<input type="button" value="普通按钮">
<!-- 文本域 -->
其它
<textarea name="other" cols="30" rows="10"></textarea>
<br>
<!-- 下拉框 value值为对应选择的下拉选项 默认变成了selected-->
籍贯:
<select name="place">
<option value="冀" selected>河北</option>
<option value="晋">山西</option>
<option value="粤">广东</option>
</select>
<!-- 禁用表单控件 disabled -->
<br>禁用
<input type="text" name="example" value="不可修改" disabled>
</form>
</body>
</html>
点击关联
<!-- 第一种做关联方式 for里是id-->
<label for="zhanghu">账户:</label>
<input type="text" id="zhanghu" name="account" value="Nozomi" maxlength="10"><br>
<!-- 第二种 直接包起来 -->
<label>
密码
<input type="password" name="pwd" value="" maxlength="8"><br>
</label>
fieldset和legend分区
效果:
代码:
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户:</label>
<input type="text" id="zhanghu" name="account" value="Nozomi" maxlength="10"><br>
<label>
密码
<input type="password" name="pwd" value="" maxlength="8"><br>
</label>
<button>确认</button>
</fieldset>
11.iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!-- 用iframe嵌入网页 frameborder只有有边框和无边框,既1和0 -->
<iframe src="https://www.taobao.com" frameborder="0" width="900" height="300"></iframe>
<!-- 嵌入图片 -->
<iframe src="懒羊羊.jpg" frameborder="0" width="900" height="200"></iframe>
<!-- 与超链接的target属性配合使用 -->
<a href="https://www.taobao.com" target="container">点我看京东</a>
<!-- 与表单的target属性配合使用 -->
<form action="https://so.toutiao.com/search" target="container">
<input type="text" name="keyword">
<input type="button" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>
</body>
</html>
12.字符实体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!-- 空格 -->
<div>i you</div>
<!-- 但如果想打 怎么办 -->
<!-- &为& -->
<div>&nbsp</div>
<!-- 如果想打&怎么办 -->
<div>&amp;</div>
</body>
</html>
13.meta
14.lang
ISO 639 语言代码
lang
属性的值通常是根据ISO 639标准定义的语言代码。常见的语言代码包括:
en
:英语zh-CN
:中文(简体)zh-TW
:中文(繁体)es
:西班牙语fr
:法语de
:德语ja
:日语ko
:韩语ru
:俄语
例如:<html lang="en">