html介绍
<!--文档类型声明-->
<!DOCTYPE html>
<!--根元素-->
<!--开始标签-->
<!--lang 属性 key = value-->
<html lang="zh">
<!--头部标签-->
<!--放脚本文件-->
<head>
<!-- 单标签-->
<!-- 编码格式声明-->
<meta charset="UTF-8">
<!-- 标题标签-->
<title>百度一下</title>
</head>
<!--可视化区域-->
<body>
我的第一个网页
<p></p>
</body>
</html>
<!--结束标签-->
<!--标签关系：包含关系 （父子关系） 并列 （兄弟关系）-->
<!--标签特点：html5 规定标签必须小写-->
<!--尖括号包裹关键字组成-->
<!--大部分都是成双成对的标签：双标签 第一个称为开始标签 第二个称为结束标签-->
<!--少数单标签；自闭合标签-->
内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--单标签-->
<!--图片标签-->
<!--三种形式-->
<!--相对路径 上一级路径 ../ 同层级路径 ./ (文件名) 下一级路径 /-->
<!--绝对路径 从磁盘出发-->
<!--网络路径-->
<img src="../image/999.jpg" alt="图片加载不成功，哈哈哈哈">
<!--<!–超链接标签–> _blank表示新增一个页面-->
<a href="https://www.baidu.com" target="_blank">点击我就跳百度</a>
<!--# 表示不跳转-->
<a href="#">我就是不动</a>
<!--锚点-->
<a href="#bottom" name="top">回到底部</a>
<!--solid实线-->
<!--red红色-->
<!--1px宽度-->
<!--border 边框-->
<div style="height: 300px; border: 1px solid red"></div>
<div style="height: 300px; border: 1px solid red"></div>
<div style="height: 300px; border: 1px solid red"></div>
<div style="height: 300px; border: 1px solid red"></div>
<div style="height: 300px; border: 1px solid red"></div>
<div style="height: 300px; border: 1px solid red"></div>
<div style="height: 300px; border: 1px solid red"></div>
<a href="#top" name="bottom">回到顶部</a>
<b>加粗</b>
<i>斜体</i>
<span>文本标签</span>
<h1>字符转义</h1>
<h1><</h1>
<h1>></h1>
<h1>用  户</h1>
</body>
</html>块级标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--段落标签-->
<p>淘宝喝酒，故事都有</p>
<p>淘宝喝酒，故事都有</p>
<p>淘宝和酒，故事都有</p>
<!--标题标签h1 -h6-->
<h1>小柒是帅比</h1>
<h2>家具店</h2>
<h3>地板都摔烂了</h3>
<h6>有头发</h6>
<!--序列标签-->
<!--有序列表-->
<ol start="5">
<!-- li是列项-->
<li>小柒帅帅</li>
<li>今年18</li>
<li>帅气到家</li>
</ol>
<!--无序列表-->
<ul>
<li>小柒帅帅</li>
<li>今年18</li>
<li>帅气到家</li>
</ul>
<!--定义列表-->
<dl>
<!-- dt是一个大的声明-->
<dt>水果</dt>
<!-- dd是定义列表的列项-->
<dd>猕猴桃</dd>
<dd>苹果</dd>
</dl>
<!--盒子-->
<!--width宽度-->
<!--height高度-->
<!--background-color 背景颜色-->
<div style="width: 100px;height: 200px;background-color: red">
</div>
</body>
</html>块级标签和内联标签的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块级标签-->
<!--width宽度 px像素-->
<p>我是块级标签
<span>我是内联标签3</span>
</p>
<!--内联标签-->
<span>我是内联标签3
<span>我是块级标签 </span>
</span>
<!--块级标签：再不设置宽度的情况下，宽度始终和浏览器容器保持一致-->
<!--设置宽高有效-->
<!--多个块级标签同时存在默认是从上往下排列-->
<!--快级标签能包含内联标签-->
<!--内联标签：之和内容有关-->
<!--设置宽高无效-->
<!--多个块级标签同时存在默认是从左往右-->
<!--内联标签只能包含内联标签-->
</body>
</html>表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表格-->
<!--border 边框-->
<table border="1">
<!-- tr 行 td 列 th 表头-->
<!-- 合并行rowspan 合并列 colspan-->
<th colspan="3">数字集合</th>
<tr>
<!-- colspan = '3' 表示占3列-->
<td colspan="3">999</td>
</tr>
<tr>
<!-- rowspan = '3' 表示占3列-->
<td rowspan="2">888</td>
<td>888</td>
<td>888</td>
</tr>
<tr>
<!-- <td>777</td>-->
<td>777</td>
<td>777</td>
</tr>
</table>
</body>
</html>form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--action提交路径-->
<form action="html介绍.html" method="post">
<!--<form action="">-->
<!-- post提交 相对安全-->
<!-- get提交 提交不安全，地址栏会显示-->
<!-- 输入函数-->
<!-- type="text" password文本框-->
<!-- placeholder提示-->
<!-- <br> 换行标签-->
<input type="text" placeholder="请输入用户" name="wd"> <br>
<input type="password" placeholder="请输入密码" name="wd"> <br>
<!-- name作用：对于用户输入的，如果没有name 属性，后台就接收不到值-->
<!-- radio单选框 在选择框里面 name表示分组 value进行传值-->
<input type="radio" value="male" name="sex"> 男
<input type="radio" value="female" name="sex"> 女
<!-- value作用：对于用户选择的，如果没有value 属性，后台就接收不到值-->
<br>
<!-- checkbox复选框-->
<input type="checkbox" value="play" name="hobby"> 打篮球
<input type="checkbox" value="study" name="hobby"> 学 习
<input type="checkbox" value="sw" name="hobby"> 游 泳
<br>
<!-- 提交文件-->
<input type="file" accept="image/*">
<br>
<!-- select下拉框-->
<select name="" id="">
<!-- option 下拉选项-->
<option value="CS">长沙吴彦祖--北斗</option>
<option value="DB">东北o--小agia</option>
<option value="XG">香港--周星驰</option>
</select>
<input type="submit" value="提交">
<!-- 隐藏域-->
<input type="hidden">
<!-- reset重置-->
<input type="reset" value="重置">
</form>
</body>
</html>
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
