前端技术：HTML + CSS + Javascript + jQuery + ajax + bootstrap
HTML的基本标签
HTML（HyperText Markup Language）超文本标记语言，网页制作必备的语言
HTML中语言的语法是标签，标签分为两种的
标签的结构分类
-
对标签
包含两部分：开始标签和结束标签
例如
<html></html> -
单标签
自带结束标记的
例如
<img />
标签的结构组成
-
<> 包含标签名
-
标签名 html
-
属性
<title 属性名=属性值 属性名1=属性值1></title>
<img 属性名=属性值 />
标签之间的关系
标签之间是可以相互嵌套的，就出现了标签和标签之间的关系
-
父子关系
直接包含的关系
<div> <b>hello</b> </div> -
兄弟关系
被同一个标签包含的标签之间的关系
<div> <b>hello</b> <img /> </div> -
先辈/后辈关系
间接包含和被包含的关系
<div> <b>hello</b> <img /> <p>hello nice to <i>meet</i> you</p> </div>
文档结构
<!-- 注释 html中的注释 快捷键ctrl + /-->
<!--
DTD 文档类型声明 Document Type Define
将当前文档声明为HTML文档
-->
<!DOCTYPE html>
<!-- html文档开始位置 -->
<html>
<!-- 文档的头部设置：文档的编码 文档的标题 文档中引入的文件等等 -->
<head>
<meta charset="utf-8">
<title>文档结构</title>
</head>
<!-- 文档体 在文档中呈现的内容都是在body中的 -->
<body>
<p>hello</p>
</body>
<!-- HTML文档结束位置 -->
</html>
常用标签
标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!--
hi标签
i是数字 有1到6的
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 分割线 -->
<hr />
</body>
</html>
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!-- 呈现一般文本的 span
由span结合css给一些文字设计样式
-->
<span>一般文本</span>
<!-- 加粗字体的文本 b 或者 strong -->
<b>王欣</b>
<strong>耿豪</strong>
<!-- 斜体字体的文本 i 或者 em -->
<i>奕辰</i>
<em>文琛</em>
<!-- 段落标签 -->
<p>第一段</p>
<p>第二段</p>
</body>
</html>
图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 属性
src -- 要显示的图片的路径【本地文件路径 或者 网络图片路径】
相对路径（使用）-- 文件放在项目下面的
参照物：当前正在编辑的文件
两个路径：
. --- 当前编辑的这个文件所在的文件夹 HTMLDemo
.. --- 当前编辑的文件所在的文件夹的上一级目录
找文件的方式
参照正在编辑的这个文件 找与目的文件相同的一级目录， 找到这级目录之后
从这个目录为起点依次去定位到目的文件
./img/picture.jpg
绝对路径
C:\Users\liuyanan\Downloads\蜡笔小新.jpg
width -- 设置图片宽度
height --- 设置图片的高度
width和height设置一方即可 另一方会根据图片的比例自适应
alt --- 图片路径的错误提示
title -- 鼠标悬浮提示语 【应用到所有标签】
-->
<img src="./img/picture.jpg" width="200" title="已选中目标"/>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d5572.png" alt='图片资源不存在' />
</body>
</html>
超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签</title>
</head>
<body>
<!-- 属性
href --- 设置链接地址
可以是网络地址 也可以是本地的html文件的地址
target -- 设置的是链接地址显示的位置
1.默认是在当前页面中显示
2._blank -- 新建一个空白的页面 在页面中显示
3.指定的具有某个名字的窗口中显示页面
-->
<a href="https://www.bilibili.com/">bilibili</a>
<a href="https://www.bilibili.com/" target="_blank">bilibili</a>
<a href="https://www.bilibili.com/" target="custom">跳转到指定窗口</a>
<!-- 内嵌窗口 -->
<!-- <iframe src="http://www.baidu.com" name="custom"></iframe> -->
<img src="img/1.jpeg" />
<!-- 如何让一张图片具有链接性 -->
<a id="xiaoxin" href="https://baike.baidu.com/item/%E8%9C%A1%E7%AC%94%E5%B0%8F%E6%96%B0/29538?fr=aladdin">
<img src="img/picture.jpg" width="100" />
</a>
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!--
1.有序列表
ol -- 列表标签
li -- 列表的元素
2.无序列表
ul --- 列表标签
li --- 列表的元素
3.自定义列表
dl --- 列表标签
dt --- 列表的元素
dd --- 对列表元素的解释
-->
<!-- 有序列表
属性 type 设置有序的符号
默认是1 ---- 数字符号
A --- 大写英文字母
a ----- 小写英文字母
I ---- 大写的罗马符号
i ---- 小写的罗马符号
-->
<ol type="i">
<li>苹果</li>
<li>西红柿</li>
<li>鸭梨</li>
</ol>
<!-- 无序列表
type: circle --- 圆圈
desc --- 默认 实心黑点
square -- 实心黑框
-->
<ul type="desc">
<li>游泳</li>
<li>篮球</li>
<li>网球</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>网球</dt>
<dd>我最喜欢的运动</dd>
<dt>苹果</dt>
<dd>我最常吃的水果</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!--
table --- 表格标签
tr --- 行
td --- 单元格
th --- 标题单元格
tbody --- 表格体
thead --- 表格头
tfoot --- 表格尾
caption --- 表格的标题
-->
<!-- table的属性
border -- 设置边框线的线宽 默认是0
width --- 设置表格的宽度
cellspacing --- 设置的是单元格之间的缝隙
height --- 设置表格的高度
-->
<table border="1" width="500" cellspacing="0" height="300">
<thead>
<tr>
<!-- 标签名*数量 tab键就能生成对应个数的标签-->
<th width="200">姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr height="150">
<td>YDZ</td>
<td>20</td>
<!-- rowspan 占几行 -->
<td style="background-color: #FFC0CB;" rowspan="2">男</td>
<td>77</td>
</tr>
<tr>
<!-- colspan 占几列 -->
<td colspan="2">DZ</td>
<!-- <td>22</td> -->
<!-- <td>男</td> -->
<td>78</td>
</tr>
</tbody>
</table>
<!-- 父标签>子标签*数量>子标签*数量 tab键 -->
<!-- table>tr*3>td*4 -->
<!-- <table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table> -->
<!-- table>tr>td*4 -->
<!-- <table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table> -->
</body>
</html>
标签：基本,包含,--,标签,标题,HTML,hello 来源： https://www.cnblogs.com/YdzBlog/p/15902977.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。