Html
参考页面:http://ui.imdsx.cn
Html 是一长串字符串,特点是能够被浏览器所解析,也叫超文本链接
我们学习了解每一个标签代表什么(功能)。
比如html分为三块:html (一个人) css (是这个人的衣服) js (这个人的动作)
Html格式(head):
<!DOCTYPE html> <!-- 规定标准的html --> ###代表说明这是个标准的html
<!--一个页面只有一个html标签--> ###<!-- --> 是这里注释的符号 正常只有一个标签
<!--标签的属性 指定英文-->
<html lang="en"> ###说明属性是英文
<head> #### <!—一般头部当中大部分标签是不可见的-->
<meta charset="UTF-8"> ####<!--自闭合标签-->
<!--<meta http-equiv="refresh" content="1">--> ####<!--每隔一秒钟刷新一次页面-->
<!--<meta http-equiv="refresh" content="2;url=http://www.imdsx.cn">--> ####可以再刷新后跳转到其他网站 可以用于域名更换跳转。
<title>双鱼座</title> #####<!--主动闭合标签--> 该标签在头中可见 <!--更改浏览器tab的名字-->
<!--rel 代表link做什么用,href代表路径-->
<link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">####用于修改tap的图标 注意这里的两个属性
<!---->
</head>
<body>
<!--<h1>标题标签</h1>--> #####<!--标题标签-->这个标签一共六个,字体由大到小
<!--<h2>标题标签</h2>-->
<!--<h3>标题标签</h3>-->
<!--<h4>标题标签</h4>-->
<!--<h5>标题标签</h5>-->
<!--<h6>标题标签</h6>-->
<!--段落标签--> #p标签就是段落标签 会有行间距离。具有一定的css标签
<!--块级标签--> #可通过悬浮查看所占位置
<!--<p>年轻,就是拿来折腾的。让自己具备独立生活的能力,具备一技之长的资本,<br>是需要无数个夜晚的静思,无数寂寞时光的堆积而成的。</p>--> ###<br>用于换行
<!--行内标签-->
<!--白板标签-->
<!--<span>年轻</span>--> #无间距 没有任何的css样式
<!--<!–伪白板标签–>-->
<!--<div>年轻</div>--> ####伪白板标签有一定属性的块级标签,可装饰成为其他标签
<!--<span><p></p></span>--> ## 可以添加空格
<!--<span><p></p></span>-->
<!--<input type="text" placeholder="请输入用户" name="useranme" value="admin">--> ###type属性指示 placeholder输入后置灰字提示文案,name是用来传参数与后台交互,value可以指定默认
<!--<input placeholder="请输入密码" type="password" name="password">-->###输入密码就会显示*******
<!--<span>是否记住登录</span><input type="checkbox" name="xxx" checked="checked">-->#####勾选框 checked="checked"是用来默认勾选的
<!--<div>性别</div>--> #块级标签下个标签就后另起一行
<!--<span>男</span><input type="radio" checked="checked" name="sex">-->### 点击选择框radio其中name="sex" name属性相同就会互斥实现单选功能。
<!--<span>女</span><input type="radio" name="sex">-->
<!--<input type="file" name="file">--> ###上传文件的按钮
<!--<!–button是需要和js连用 通过js进行提交操作–>-->
<!--<input type="button" value="提交">--> ##按钮 value属性 需要和js联用
<!--<form action="http://www.baidu.com" method="get">--> ###from标签相当于一个承载体,有点像白纸。参数action 比如点击登录跳转
<!--<input type="text" value="admin" name="username">-->
<!--<input type="reset">--> ###重置按钮
<!--<!–submit如果和form连用则 直接提交标单–>-->
<!--<input type="submit" value="登录">--> ### submit如果和form连用则 直接提交标单,会刷新
<!--<input type="button" value="button登录">--> ###不会用 需要js,可以用于异步提交
<!--</form>-->
<!--扩展了input的可点击范围 -->
<!--<label for="i1">用户名</label><input id="i1" type="text" value="admin">-->### label标签扩展了input的可点击范围
<!--<span>密码</span><input type="password">-->
<!--多行文本-->
<!--<textarea name="tex">sssss</textarea>--> ####多行文本
<!--<select name="city" size="2" multiple="multiple">--> #### select标签里面添加选项option size="2"可以用来展示几个元素。Multiple属性可以实现多选功能(ctrl)。
<!--<option value="1">北京</option>-->###可以添加value代表。
<!--<option value="2" selected="selected">河北</option>-->####默认选择项
<!--<option value="3">黑龙江</option>-->
<!--</select>-->
<!--<select>-->
<!--<optgroup label="黑龙江">-->###分组
<!--<option>牡丹江</option>-->
<!--<option>哈尔滨</option>-->
<!--</optgroup>-->
<!--<optgroup label="河北">-->
<!--<option>石家庄</option>-->
<!--<option>唐山</option>-->
<!--</optgroup>-->
<!--</select>-->
<!--超链接标签-->
<!--<a href="http://www.imdsx.cn">大师兄博客</a>--> ###a是超链接标签
<!--<a href="#i1">跳转</a>--> ###锚点
<!--<div id="i1">ssssssssssssssssssssssssssss</div>-->
<!--<ul>--> ####ul和li列表展示以点为开头
<!--<li>大连</li>-->
<!--<li>秦皇岛</li>-->
<!--</ul>-->
<!--<ol>--> ####以数字为开头的列表
<!--<li>大连</li>-->
<!--<li>秦皇岛</li>-->
<!--</ol>-->
<!--<dl>--> ####以空格为开头的列表
<!--<dt>黑龙江</dt>-->
<!--<dd>牡丹江</dd>-->
<!--<dd>哈尔滨</dd>-->
<!--</dl>-->
<!--<table border="1">--> ###表格标签border="1"是加边框
<!--<thead>--> ###表头
<!--<!–行–>-->
<!--<tr>--> ##行
<!--<!–表头当中的列–>-->
<!--<th>id</th>--> ###表头当中的列
<!--<th>请求方式</th>-->
<!--<th>参数</th>-->
<!--<th>接口</th>-->
<!--<th colspan="2">操作</th>--> #合并两列
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<!–行–>-->
<!--<tr>-->
<!--<!–表体中的列–>-->
<!--<td>1</td>-->###表体中的列
<!--<td>post</td>-->
<!--<td>{'name':'dsx'}</td>-->
<!--<td rowspan="3">/login</td>-->
<!--<td>修改</td>-->
<!--<td>删除</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>1</td>-->
<!--<td>post</td>-->
<!--<td>{'name':'dsx'}</td>-->
<!--<td><a href="update.html">修改</a></td>-->
<!--<td>删除</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>1</td>-->
<!--<td>post</td>-->
<!--<td>{'name':'dsx'}</td>-->
<!--<td>修改</td>-->
<!--<td>删除</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--<img src="http://ui.imdsx.cn/static/image/dsx1.jpg" alt="失败时展示的文字" title="鼠标悬浮时显示的文字">--> ###img的图片标签 注意几个参数
<div>1</div>
<span>1</span>
< >
<input>
<!--井号代指id-->
<!--<a href="#i1"></a>--> #号代指id
<!--id 选择器-->
<!--<div id="i1"></div>-->
</body>
</html>