html基础1

<!DOCTYPE html>    <!--标准的html规则,类似于Python的解释器-->
<html lang="en"> <!--html标签(只能一个),指定语言en-->
<head> <!-- html head标签的开始 -->
<meta charset="UTF-8"> <!-- 指定编码 -->
<title>liudaozhang</title>
<link rel="shortcut icon" href="http://www.xxxx.cn:80/wp-/images/logo.jpg">
<!--<meta http-equiv="refresh" content="3"> &lt;!&ndash; 每3秒中刷新一次 &ndash;&gt;-->
<!--<meta http-equiv="refresh" content="1" ;Url=http://www.imdsx.cn"> &lt;!&ndash; 3秒后跳转页面 &ndash;&gt;-->

<!--<meta name="keywords" content="大打打"> &lt;!&ndash; 关键字检索 &ndash;&gt;-->

<!--<meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt;!&ndash; ie打开时以最高的兼容模式打开 &ndash;&gt;-->

<!--写入css文件的位置的 先欠着 以下这四个标签很重要-->
<style></style>

<!--引入js的 -->
<script></script>

<!--title 的图标-->
<link rel="shortcut icon" href="....">

<!--引入css文件的-->
<link rel="stylesheet" href="。。。">


</head> <!-- html head标签的结束 -->
<!--<> html body标签的开始 -->
<!--111111111-->
<!--<h1>kkk11111</h1>-->

<!--标签类型:-->
<!--1、自闭和标签 -单身狗-->
<!--如:<meta> <link> <input> <br/> -->
<!--2.主动闭合标签-->
<!--如:<p></p> <div></div> 有两对-->

<!--<br> 换行标签-->
<!--<p> 段落标签-->
<!--<h1></h1> 至 <h6></h6> 标题标签-->

<!--块级标签 占用整行-->
<!--<h1></h1>-->
<!--<div></div> 相当于一块白板,什么都没有 一切都需要通过css进行装饰,同时通过装饰后,变成任意标签-->

<!--内连标签 用多少占多少空间-->
<!--<span> </span> 真的一块白板,什么css样式都没有 同时通过装饰后,变成任意标签-->


<!--文本框标签-->
<!--<input type="text" value="请输入用户名">-->

<!--<input type="text" placeholder="请输入用户名">-->

<!--<input type="password"> 密文显示-->

<!--多选框-->
<!--<input type="checkbox"> 默认不勾选-->

<!--<br/><input type="checkbox" checked="checked"> 默认勾选 -->

<!--单选框-->
<!--name 相同的时候 多个radio互斥-->
<!--<input type="radio" name="r1"> 男-->
<!--<input type="radio" name="r1"> 女-->

<!--按钮-->
<!--<input type="button" value="确认">-->
<!--button只是一个单纯的按钮 如果需要提交数据,就需要和js连用-->

<!--<input type="submit" value="确认">-->
<!--submit如果和form连用 直接请求form对应的action的目标url-->
<!--form 比作一张纸 input输入进来的东西就是写在纸上的字 通过form提交给服务端-->

<!--action 提交的url路径-->
<!--method 请求方式-->
<!--reset 重置标签 与form表单连用时,充值到初始化样式-->
<!--<form action= "http://www.imdsx.cn" method = "get">-->
<!--<input type="text" placeholder="请输入用户名" name="">-->
<!--<input type="text" placeholder="请输入密码" name="">-->
<!--<input type="submit" value="登录">-->
<!--<input type="reset" value="重置" >-->

<!--</form>-->

<!--=====================================================-->
<!--<label></label>-->
<!--<span>用户名:</span> <input type="text"> <br/> 只有文本框内才有焦点-->

<!--label 通过for 和input的id 进行连用 增大input获取焦点的范围-->
<!--<label for="i1">用户名:</label> <input type="text" id="i1"> 只要触及文字就能有焦点-->

<!--选择器-->
<!--id 在整个html标签里面只能有一个 是唯一的 不能重复 简单的来说就是标签的一种属性-->
<!--但是id选择器他具有特殊的功能 可以让css 通过id定位到具体的标签-->
<!--class-->
<!--<label for="i1">用户名</label> <input type="text" id="i1" class="c1">-->

<!--<textarea> textarea的内容需要写在两个标签之间 -->
<!--<textarea >内容</textarea>-->

<!--下拉框<select></select>-->
<!--<select size="3" multiple="multiple" name="s1">-->
<!--下拉框显示2个选项 multiple="multiple"表示下拉框中的数据-->
<!--<option selected="selected" value="1">黑龙江</option> selected="selected"表示默认选择某可以多选个选项-->
<!--<option value="2">牡丹江</option>-->
<!--<option value="3">铁岭</option>-->
<!--<option value="4">北京</option>-->
<!--</select>-->
<!--如何后端传输数据?-->
<!--select 标签也有name和value name写在select中 value写在option中代表不同的用1 代表黑龙江,2代表铁岭...-->
<!--name是选项框的名字,value是选项框中的参数-->


<!--<select>分组的写法-->
<!--<select >-->
<!--<optgroup label="黑龙江">-->
<!--<option>牡丹江</option>-->
<!--<option>漠河</option>-->
<!--<option>铁岭</option>-->

<!--</optgroup>-->
<!--<optgroup label="北京">-->
<!--<option>西门</option>-->
<!--<option>东门</option>-->
<!--<option>南门</option>-->
<!--</optgroup>-->
<!--</select>-->


<!--超文本链接标签 重要 重要 重要-->
<!--<a href="http://ui.imdsx.cn/" target="_blank" style="text-decoration: none">daozhang</a>-->
<!--target="_blank"代表在新的标签页打开,没有这个属性就在原页面打开-->
<!--style="text-decoration: none" 这个属性的作用是把 文本的下划线去掉-->
<!--href="http://ui.imdsx.cn/" 链接的地址-->

<!--a标签当做锚点使用回到顶部-->
<!--<div style="height: 10000px;" id="i1"></div>-->

<!--<a href="#" style="text-decoration: none">回到顶部</a>-->
<!--href 如果单独输入 # 代表哪里都不跳转-->
<!--href 如果单独输入 i1 代表-->

<!--<a href="s.html" >回 到 顶 部</a>-->
<!--第一种:-->
<!--当空格特别多的时候 界面上就不能这么显示了-->
<!--这时候需要 用特殊符号 &nbsp-->
<!--<a href="s.html" >回&nbsp到&nbsp 顶 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp部</a>-->

<!--第二种:-->
<!--&gt 大于号-->
<!--&lt 大于号 类似的符号很多 用到的时候自行百度吧-->
<!--<a href="s.html" >回&gt;到&gt;&lt;&lt;&gt;&gt 顶 &gt;&lt;&lt部</a>-->


<!--图片标签-->
<!--<img src="http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg" alt="小孩" title="小猪猪">-->
<!--<img src="hg" alt="小孩"> alt 当图片不存在的时候提示语 title="小猪猪"鼠标悬浮上去的时候显示名称-->

<!--列表 点 形式的标签-->
<!--<ul>-->
<!--<li>123</li>-->
<!--<li>456</li>-->

<!--</ul>-->

<!--列表 数字 形式的标签-->
<!--<ol>-->
<!--<li>qqq</li>-->
<!--<li>rrr</li>-->

<!--</ol>-->

<!--分组列表-->
<!--<dl> 最外层标签-->
<!--<dt>黑龙江</dt> 二层标签-->
<!--<dd>牡丹江</dd> 二层标签下面的-->
<!--<dd>漠河</dd>-->
<!--</dl>-->


<!--table 表格标签 thead:表头 th:表头行 tbody:内容 tr:行 -->
<!--td:列 boder:表格的边框 coslpan:td占几列 rowspan:tr占几列-->

<table border="1"> border="1"加边框
<thread>
<tr>
<th>ID</th> th是表头内容
<th>课程</th>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th colspan="2">操作</th> colspan="2"表示占两列
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td rowspan="3">计算机</td>
<td>1班</td>
<td>ppp</td>
<td rowspan="3">18</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>1班</td>
<td>ppp</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>1班</td>
<td>ppp</td>
<td>编辑</td>
<td>删除</td>
</tr>
</tbody>
</table>

</body> <!-- html body标签的结束 -->
</html>
原文地址:https://www.cnblogs.com/zunchang/p/8280584.html