zoukankan      html  css  js  c++  java
  • 前端基础之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>

  • 相关阅读:
    cjss 像编写css 一样开发web应用
    GitLab : Omnibus Installer
    集成omnibus-ctl 开发一个专业的软件包管理工具
    Chocolatey 方便的windows 包管理工具
    Omnibus-ctl: What is it and what can it do for you?
    omnibus-gitlab 架构学习
    Omnibus 安装
    rbenv mac&&linux 安装简单说明
    使用rbenv 进行ruby 多版本的管理
    vlang module 使用
  • 原文地址:https://www.cnblogs.com/cslw5566/p/9213533.html
Copyright © 2011-2022 走看看