HTML之HTML基础

HTML

一个个具有不同样式的标签组合成的一大堆字符串，由浏览器解析就形成了我们看到的网页

HTML--head

<!DOCTYPE html>  <!--告诉浏览器这是一个HTML，通过html5 解析下方代码-->

<html lang="en"> <!--html标签，一个页面只有一对，指定语言-->
<head>
    <!--指定当前页面的字符集编码-->
    <meta charset="UTF-8">
    <!--每1秒钟刷新一下-->
    <meta http-equiv="refresh" content="1">
    <!--1秒后跳转到www.baidu.com-->
    <meta http-equiv="refresh" content="1;http://www.baidu.com">
    <!--关键字检索，网络爬虫就根据这个keywords-->
    <meta name="keywords" content="besttest">
    <!--网站描述-->
    <meta name="description" content="这是内容">
    <!--ie打开时以最高兼容模式打开-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--浏览器tag上的名字-->
    <title>我的tag</title>
    <!--设置tag上的小图标-->
    <link rel="shortcut icon" href="logo.jpg">
    <!--引入css样式表-->
    <link rel="stylesheet" href="xxx.css">
    <!--在这标签内可以写css的一些样式-->
    <style></style>
    <!--引入js或编写js-->
    <script src="tmp.js"></script>
</head>
<body>

</body>
</html>

HTML标签

  • 自闭合标签     如<br>这种不成对出现的
  • 主动标签标签      如<p></p>这样需要成对出现的

HTML--body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的tag</title>
</head>

<body>
<!--p--段落标签-->
<!--br--换行-->
<p>段落标签<br>年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。

<!--标题标签  h1-h6 ,h1最大 -->
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>

<!--div是块级标签(伪白板标签)  无论自己有多大都占满一整行-->
<div>生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</div>

<!--span标签 叫内联标签或行内标签 自己有多大就占多大-->
<!--span 是白板标签 没有任何css 修饰-->
<span>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</span>

<!--&nbsp 空格  &lt; 左尖括号   &gt; 右尖括号  -->
<!--<p></p> 页面上这么写-->
&lt;p&gt;&lt;/p&gt;

<!--input标签 type有很多类型，默认为文本输入框text-->
<!--type="text"  placeholder 默认灰底字 输入文字时消失-->
<!--name属性是跟后端交互的key，value属性是跟后端交互的值  向后端传的json串{"username":admin,"passwd":"123456"}-->
<input type="text" placeholder="请输入用户名：" value="admin" name="username">

<!--type="password" 输入显示为密文-->
<input type="password" placeholder="请输入密码："  name="passwd">

<!--type="radio"单选-->
<!--通过name属性控制只能单选，当name相同时，几个选项是互斥的-->
<span>男</span><input type="radio" name="sex">
<span>女</span><input type="radio"  name="sex">

<!--type="checkbox"多选框  {"check":[1,2,3]} 默认值checked="checked"-->
<span>火锅</span> <input type="checkbox" name="check"  value="1"  checked="checked">
<span>干锅</span> <input type="checkbox" name="check" value="2">
<span>小龙虾</span> <input type="checkbox" name="check" value="3">

<!--type="file"上传文件-->
<input type="file">

<!--表单标签-->
<form action="http://www.baidu.com" method="post">
    <div>
        <!--重置按钮，重置输入框中文本  在form表单中才有用-->
        <input type="reset">
        <span>用户名：</span>
        <input type="text" placeholder="请输入用户名">
        <label for="i1">用户名</label>   <!--laber 和 input 连用的时候可以增加input的可点击范围-->
        <input id="i1" type="text" placeholder="请输入用户名">
    </div>
    <div>
       <span>密&nbsp&nbsp码：</span>   <!--浏览器会把文本中的多个空格解析成一个-->
        <input type="password" placeholder="请输入密码">
    </div>
</form>

<form action="http://www.baidu.com" method="get">
    <!--重置按钮，重置输入框中文本  在form表单中才有用-->
    <input type="reset">
    <input type="text">
    <!--只是单纯的按钮标签 只有和js连用的时候才有效果-->
    <input type="button" value="登陆-button">
    <!--submit 如果和form表单连用 则会直接进行提交操作-->
    <input type="submit" value="登陆-submit">
</form>

<!--多行文本框，标签中间写的文字默认显示在文本框-->
<textarea>默认显示在多行文本框中</textarea>

<!--下拉框-- selected="selected"默认选择-->
<select>
    <option value="1">beijing</option>
    <option value="2">shanghai</option>
    <option value="3" selected="selected">shengzheng</option>
</select>

<!--分组下拉框-->
<select>
    <optgroup label="黑龙江">
        <option value="" selected="selected">mudanjiang</option>
        <option value="">hebei</option>
        <option value="">hg</option>
    </optgroup>
    <optgroup label="河北">
        <option value="">sjz</option>
        <option value="">ls</option>
        <option value="">hg</option>
    </optgroup>
</select>

<!--超链接标签  target="_blank"新的tag页打开-->
<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

<!--img的alt  图片加载失败的属性  title  鼠标悬浮的属性 -->
<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg" alt="图片加载失败的属性" title="鼠标悬浮的属性">

<!--列表 点的列表-->
<ul>
    <li>第一列</li>
    <li>第二列</li>
</ul>

<!--列表 数字列表-->
<ol>
    <li>第一列</li>
    <li>第二列</li>
</ol>


<!--dt是外层 dd是内层-->
<!--
实现分级显示：
HTML代码
        p标签
        div标签
-->
<dl>
    <dt>HTML代码</dt>
    <dd>p标签</dd>
    <dd>div标签</dd>
</dl>

    <!--表格 border="1"边框为1-->
    <table border="1">
        <!--表头-->
        <thead>
            <!--行-->
            <tr>
                <!--列-->
                <th>id</th>
                <th>method</th>
                <th>data</th>
                <!--colspan="2" 列占两列-->
                <th colspan="2">action</th>
            </tr>
        </thead>
        <!--表体-->
        <tbody>
        <!--行-->
            <tr>
                <!--列-->
                <td>1</td>
                <td rowspan="3">post</td>
                <td>{}</td>
                <td>run</td>
                <td>modify</td>
            </tr>
            <tr>
                <!--列-->
                <td>2</td>
                <td>{}</td>
                <td>run</td>
                <td>modify</td>
            </tr>
            <tr>
                <!--列-->
                <td>3</td>
                <td>{}</td>
                <td>run</td>
                <td>modify</td>
            </tr>
        </tbody>
    </table>

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yanyan-/p/11072735.html