HTML基础之HTML标签

HTML:超文本标记语言

html代码实际上就是一套能够被浏览器识别的规则代码，由一个个标签组成。

后端与前端交互方式：

1、后端直接返回浏览器能够识别的html代码

2、后端返回数据，前端替换html中的指定数据

基本的HTML页面

<!DOCTYPE html>   <!--始终位于页面的第一行，告诉浏览器这是一个HTML页面-->

<html lang="en">   <!--html标签(只能有一个)，指定语言-->

<head>    <!--<head> 和</head>之间为文档的头部 -->
    <meta charset="UTF-8">  <!--设置编码类型-->
    <title>Title</title>     <!--标题-->
</head>

<body>   <!--<body> 和</body>之间为文档的主体部分，也是用户能看到的部分-->
</body>

</html>

HTML标签

1、自闭和标签

   <meta charset="UTF-8">     只有开头标签，没有结束标签

2、主动闭合标签 

     <title></title>   

html head

head 标签中的内容都是为浏览器和搜索引擎准备的

<!DOCTYPE html>
<html lang="en">
<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">

    <!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->
    <title>金牛座</title>
    <!--rel代表告诉浏览器我要把link作为title的图标-->
    <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
    <!--引入css样式表-->
    <link rel="stylesheet" href="xxx.css">
    <!--css样式-->
    <style></style>
    <!--引入js或编写js-->
    <script src="tmp.js"></script>
</head>
<body>

</body>
</html>

html body

p、br、h、form、div、span、input、label、空格(&nbsp)、 大于号(&gt) 、小于号 (&lt) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金牛座</title>
</head>

<body>
<!--p--段落标签-->
<!--br---换行标签-->
<p>马云说：<br>人生在世，总是要经历些悲欢离合、人情冷暖，自9月10日宣布一年后将退休后，阿里巴巴董事局主席马云受到了更多的关注，今天马云在达沃斯论坛上对诸多疑问一一作答。</p>

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

<!--div是块级标签(伪白板标签)  无论自己有多大都占满一整行-->
<div>水电费</div>

<!--span是行内标签 或 白板标签 或叫 内联标签，没有附着任何css样式  自己有多大就占多大位置-->
<span>水电费</span>

<!--input标签 type有很多类型，默认为文本框text-->
<!--type="text"  placeholder-默认提示-->
<!--name属性是跟后端交互的key，value属性是跟后端交互的值  向后端传的json串{"username":admin,"passwd":"123456"}-->
<!--placeholder-默认提示-->
<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>
        <span>用户名：</span>
        <input type="text" placeholder="请输入用户名">
        <label for="i1">用户名</label>   <!--label扩展input的可点击范围，label和input通过id来关联-->
        <input id="i1" type="text" placeholder="请输入用户名">
    </div>
    <div>
       <span>密&nbsp&nbsp码：</span>   <!--浏览器会把文本中的多个空格解析成一个-->
        <input type="password" placeholder="请输入密码">
    </div>
<div>
    <!--button如果想要有操作 只能通过js绑定事件来做-->
    <input type="button" value="登录">
    <!--submit按钮如果和form表单连用则会直接触发请求-->
    <input type="submit" value="注册">
    <!--reset按钮如果和form表单连用则会直接触发重置操作-->
    <input type="reset">
</div>
</form>

<!--富文本标签-->
<textarea></textarea>
<!--特殊转译符-->
<!--&lt 代表<   &gt 代表>-->
&ltp&gt&lt/p&gt

<!--下拉框标签-->
<select name="s1">
    <option value="1">中秋</option>
    <option value="2">国庆</option>
    <option value="3" selected="selected">都过不上</option>
</select>

<!--分组下拉框-->
<select>
    <option>请选择城市</option>
    <optgroup label="黑龙江">
        <option>哈尔滨</option>
        <option>牡丹江</option>
    </optgroup>
    <optgroup label="河北">
        <option>石家庄</option>
        <option>秦皇岛</option>
    </optgroup>
</select>

<!--超链接标签-->
<a href="http://www.baidu.com">跳转到百度</a>

<!--图片标签-->
<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>

<!--表格-->
<table border="1">
    <thead>      <!--thead 表头-->
    <tr>
        <th>id</th>
        <th>请求方式</th>
        <th>请求参数</th>
        <th colspan="2">操作</th>    <!--colspan 占几列-->
    </tr>
    </thead>
    <tbody>      <!--tbody 表体-->
    <tr>
        <td>1</td>
        <td>post</td>
        <td>{}</td>
        <td>修改</td>
        <td>执行</td>
    </tr>
     <tr>
        <td>1</td>
        <td>post</td>
        <td>{}</td>
        <td>修改</td>
        <td rowspan="2">执行</td>   <!--rowlspan 占几行-->
    </tr>
     <tr>
        <td>1</td>
        <td>post</td>
        <td>{}</td>
        <td>修改</td>
    </tr>
    </tbody>
</table>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/HathawayLee/p/9695196.html