<!DOCTYPE html> <!--文档类型声明,当前以html5渲染-->
<!--文档的开始-->
<html lang="en">
<!--文档的头部-->
<head>
<!-- 某一些配置信息，文档的标题，引用文档的类型、样式或脚本-->
<!-- 字符集编码-->
<meta charset="UTF-8">
<!-- 文档标签-->
<title>html的基本结构</title>
</head>
<!--文档主体-->
<body>
<!--可视化区域：展示在页面-->
特点
1.一般标签都是成对出现，前面的为开始（开放）标签，后面的叫做的结束（闭合）标签
2.单个的标签叫做自闭合标签
3.标签是由尖括号包围关键词组成
4.标签不区分大小写，规范小写（数据库规范大写）
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块状标签的特点</title>
</head>
<body>
<!--块状标签的特点：
1.多个块状标签写在一起时，排列方式从上往下
2.霸道，独占一行，可以实现自动换行
3.在不设置宽度的前提下，宽度与内容没有关系，与浏览器宽度有关
4.能够识别宽高，设置宽高有效-->
<p style="width: 100px; height: 50px">我是段落标签1</p>
<p>我是段落标签2</p>
<p>我是段落标签3</p>
<p>我是段落标签4</p>
<p>我是段落标签5</p>
<p>我是段落标签6</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的块状标签</title>
</head>
<body>
<!--标题标签h1~h6-->
<h1>我是一级标题，一个网页只有一个</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题，默认标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<!--段落标签p-->
<p>我是段落标签（特别），p不可以嵌套其他段状标签</p>
<!--列表标签-->
<!--有序列表-->
<ol></ol>
<!--ol>li*4-->
<!--属性type默认属性值为1（1，a,A,i,I）-->
<!--属性start：限定开始值，默认为1-->
<ol type="i" start="3">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ol>
<!--无序列表-->
<!--ul>li*4-->
<!--属性type默认属性值为disc（实心圆）（circle空心圆，none取消前缀，square实心正方形）-->
<ul type="square">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ul>
<!--（自）定义列表-->
<!--对一个**或项目进行解释-->
<!--
<dl>
<dt></dt>
<dd></dd>
</dl>
-->
<div style="width: 200px; height: 300px; border: 1px solid red">
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>提子</dd>
<dd>山竹</dd>
<dt>蔬菜</dt>
<dd>青菜</dd>
<dd>白菜</dd>
<dd>山药</dd>
</dl>
<!--div标签-->
<!--与段落区别：p写文字，div划分基本结构-->
我是盒子</div>
<!--边框：宽度为1px，样式是实线，颜色是红色（顺序随意）-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的行内标签</title>
</head>
<body>
<!--图片标签-->
<!--source路径：相对路径、绝对路径、网页图片路径，alter解释性文字-->
<!--相对路径：相对当前文档，图片文件夹所在的路径
绝对路径：相对于磁盘进行出发-->
<img src="./images/one.png" alt="图片发生错误">
<img src="C:\Users\zhangguozhi\Pictures\Saved Pictures\QQ截图20210529155359.png" alt="图片发生错误">
<!--默认路径从当前项目出发，故绝对路径的图片显示不出来（使用绝对路径才能）-->
<!--网址-->
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.5jSe2DC6VA_pI78UA2hUigHaEK?w=274&h=180&c=7&r=0&o=5&dpr=1.75&pid=1.7" alt="图片发生错误">
<!--粗体标签-->
<b>我是粗体标签</b>
<!--斜体标签-->
<i>我是斜体标签</i>
<!--超链接标签,默认当前页面跳转-->
<a href="demo03.html">我是超链接</a>
<!--目标默认为target="_self"本身目录-->
<a href="demo02.html" target="_blank">打开新页面</a>
<!--_blank另起一个空白页面（窗口），打开这个页面-->
<!--锚点链接-->
<a href="#bottom" name="top">我要去底下</a>
<a href="#top" name="bottom">我要去上面</a>
<!--文本标签-->
<span>文本标签：配 合css展示不同样式</span>
<!--文本只展现一个空格，<与尖括号冲突，一个文字的宽度 -> 转义实现-->
<!--所有的特殊符号都是以&开头，以；结尾-->
<span>我是 文本标签</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1">
<!-- 表格两个属性：合并行rowspan与合并列colspan-->
<!-- 标题-->
<caption>零食</caption>
<!--行标签-->
<tr>
<!-- 表头-->
<th colspan="2">饮料</th>
<!-- <th>干货</th>-->
</tr>
<tr>
<!-- 列标签-->
<td rowspan="2">果粒橙</td>
<td>开心果</td>
</tr>
<tr>
<!-- <td>可乐</td>-->
<td>坚果</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--用来搜集不同用户的一些输入：点击登入按钮出现的账号登入界面进行提交数据，百度搜索框-->
<!--action放入你要提交的数据；method:提交方式post和get-->
<!-- get会将提交的数据在地址栏中展示；
不安全；对于提交内容会有内容长度限制；页面渲染
post：相对安全，对于提交的内容没有长度限制；数据提交
-->
<form action="#" method="post">
<!--什么也不提交只在当前路径-->
姓名：<input type="text" placeholder="请输入姓名" name="user"><br>
<!-- br换行标签-->
密码：<input type="password" placeholder="请输入密码" name="pwd"><br>
性别：<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
<!-- text文本框/password密码框/radio单选框/submit提交/reset重置，placeholder提示文字，name属性在前后交互的情况下使用-->
<!-- 当属性名和属性值一样的时候可以只写属性值checked="checked"，checked：默认选中（男）-->
<!-- name值决定是否同组-->
<!-- value:前后交互的情况下，value里的内容为 具体给后台传送的值-->
<br>
<input type="submit" value="登入">
<input type="reset" value="重置/清空">
<button type="submit">登入</button>
<button type="reset">重置</button>
<!-- 可以单独使用，但重置表格还需放里面（放form外面无法清空）-->
</form>
</body>
</html>
1715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
