前端基础之html

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样式

<!--&lt;!&ndash;伪白板标签&ndash;&gt;-->

<!--<div>年轻</div>-->   ####伪白板标签有一定属性的块级标签,可装饰成为其他标签

<!--<span>&ltp&gt&lt/p&gt</span>-->   ##&nbsp可以添加空格

<!--<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">-->  ###上传文件的按钮

<!--&lt;!&ndash;button是需要和js连用 通过js进行提交操作&ndash;&gt;-->

<!--<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">-->   ###重置按钮

<!--&lt;!&ndash;submit如果和form连用则 直接提交标单&ndash;&gt;-->

<!--<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>-->   ###表头

    <!--&lt;!&ndash;行&ndash;&gt;-->

    <!--<tr>-->  ##行

        <!--&lt;!&ndash;表头当中的列&ndash;&gt;-->

        <!--<th>id</th>-->   ###表头当中的列

        <!--<th>请求方式</th>-->

        <!--<th>参数</th>-->

        <!--<th>接口</th>-->

        <!--<th colspan="2">操作</th>-->  #合并两列

    <!--</tr>-->

    <!--</thead>-->

    <!--<tbody>-->

    <!--&lt;!&ndash;行&ndash;&gt;-->

    <!--<tr>-->

        <!--&lt;!&ndash;表体中的列&ndash;&gt;-->

        <!--<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>

    &lt &gt &nbsp;

    <input>

    <!--井号代指id-->

    <!--<a href="#i1"></a>-->  #号代指id

    <!--id 选择器-->

    <!--<div id="i1"></div>-->

</body>

</html>

原文地址:https://www.cnblogs.com/cslw5566/p/9213533.html