1. 技术文章
  2. 前端-html-长期维护

前端-html-长期维护

由 一个人想着一个人 提交于 2020-03-21 08:14:21

###############     前端学什么？    ################

# 前端三大部分
# HTML，页面内容，学习标签
# CSS，页面样式，学习选择器和属性
# JS，页面动作，学习基础语法和BOM&DOM
#################
# jQuery和bootstrap

 

###############     HTML的学习内容    ################

HTML的学习内容

1，文档结构，注释，标签格式，
2，head里面的常见标签，meta，title，style，link，script，
3，body里面的常见标签，
常用标签，div，span，p，img，u，i，s，b，a，
列表，ul，li，ol，dl，dt，dd，
表格，table，thead，tr，th，tbody，tr，td，
表单，input，select，textare，

基本就是这几部分，

 

###############     html文件的结构     ################

# html文件的结构
# <!DOCTYPE html>  # 这是标记这是一个html文件
# <html>
# <head></head>
# <body></body>
# </html>

 

###############     html注释     ################

<!--注释内容-->

<!--商品列表 开始-->
商品列表相关的html代码
<!--商品列表 结束--># 注释是非常重要的一个代码习惯！！

 

###############     html常用的标签     ################

<!DOCTYPE html>
<html lang="en">

<!--head 内常用标签######################################################
<title></title> # 定义网页标题
<style></style> # 定义内部样式
<script></script>  # 定义js代码或者引入外部js文件
<link rel="stylesheet" href="test.css">  # 引入外部样式文件
<meta> # 定义网页原信息，原信息是给浏览器看的，不是给客户看的，
    <meta charset="UTF-8">  # 中文显示
-->

<head>
    <meta charset="UTF-8">
    <title>这是第一个html页面</title>
    <!--<style>-->
        <!--a{-->
            <!--color: red;-->
        <!--}-->
    <!--</style>-->
    <script>
        // alert("hello")
    </script>
    <link rel="stylesheet" href="test.css">
</head>
<body>
<!--
body 内部常用的标签#########################################
<h1></h1>标签
<img src="" alt="">标签
<a href=""></a> 标签
标签里面可以添加属性，
-->
<a href=""></a>
<!--h标签，h1最大，使用的场景就是标题，比如新闻的一级二级三级标题-->
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
hello

<!--src是图片地址，alt是图片加载失败的时候给用户一个提示，title是鼠标放上去会显示这个图片title-->
<!--id，同一个页面是唯一的，可以没有这个属性，-->
<img id="i1" src="http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" alt="图片加载失败" title="鼠标放上去会显示这个图片title">


<!--href是超链接的地址，target="_blank"，这是在新的浏览器页面打开，不加这个就在本页面打开，不只是可以跳转连接，还可以跳转到另一个a标签-->
<a href="http://www.baidu.com" target="_blank">baidu</a>
<a href="#a1">跳转到a1</a>
<a href="" id="a1">a1标签</a>

<!--
b加粗
i倾斜
u下滑线
s删除
p段落
br/换行
hr水平线
-->
<b>python</b>
<i>python</i>
<u>python</u>
<s>python</s>

<h1>海燕</h1>
<p>这是一个段落</p>
<br/>
<hr>
<p>这是一个段落</p>


<!--
特殊字符
1&lt;  小于号
&gt; 大于
&copy; 版权
&nbsp;空格
&amp;   &
&yen;  ￥
&reg;  注册
这是常用的，还有很多，用到的时候网上查
-->
1&lt;
2&gt;
&copy;
&amp;
&yen;
&reg;
<h1> 海&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;燕</h1>

<!--
div标签和span标签###############################################
div标签会换行，
span标签不会换行，
这两个标签没有明显的特点，这两个就像是白纸，是我们在html里面用的最多的，改变样式是使用css，
快速复制本行到下一行：ctrl+D
##########################

这两个什么时候使用？
标签分类：
块级标签，默认占浏览器长度，能设置长和宽，h标签，div标签，p标签，hr标签，
内联标签，根据内容决定长度，不能设置长和宽，比如a标签，u，b,s，i，span，img标签，

-->
<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>

</body>
</html>

 

###############     html列表    ################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--列表-->
<!--无序标签   unordered list  -->
<!--
前面是黑色的圆圈，可以改变这个样式，
type：
square：实心方块
circle：空心圆圈

-->
<ul type="square">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<!--有序标签   ordered list-->
<!--
前面默认是数字1，可以改变这个，
type：
I ：罗马数字
A：字母，
...

start :3
这是可以指定从第几开始，
-->
<ol type="I" start="3">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>


<!--标题列表  definition lists-->
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>


</body>
</html>

 

###############     html表格    ################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--表格-->
<!--
表格：table
属性，border，设置边框，默认是没有边框的，一般不用这个，都是用css来设置，

表头：thead
行：tr，table row
列：th，table header cell
表内容，tbody
行：tr table row
列：td  table data cell
-->
<table border="1">

    <thead>
    <tr>
        <th>姓名</th>
        <th>爱好</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>andy</td>
        <td>11</td>
        <td>man</td>
    </tr>

    <tr>
        <td>liqian</td>
        <td>11</td>
        <td>man</td>
    </tr>
    </tbody>
</table>

</body>
</html>

 

###############     标签的嵌套规则     ################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
标签的嵌套规则
1，行内标签不能嵌套块级标签，
2，p标签不能嵌套块级标签

-->
<!--块级标签div嵌套div，这种是用的最多的，-->
<div>
    <div>嵌套</div>
</div>

<!--p标签也是块级标签但是不能嵌套块级标签-->
<p>
    <div> 这种嵌套是不行的</div>
</p>

<!--块级标签可以嵌套行内标签-->
<h1><a href=""><i>这种嵌套都是可以的</i></a></h1>

</body>
</html>

 

###############     html-表单form    ################ 

表单总结：

表单是一个重要内容

input标签的，10种，type：text，submit，email，file，date，radio，CheckBox，reset，button，hidden，   name，type和value都在input里面，

input-text标签，这种单独说一下，三个独特的设置，readonly，disable，placeholder，

input-Redio和CheckBox，还有一个设置就是checked，默认是选中的状态，

input-hidden，这种在修改的时候需要传递后端id，但是我们不想要客户修改，就可以隐藏起来，这种要有name和value的，

select标签和option标签，这一对，name在select里面，value在option里面，select里面可以设置multiple，就是多选的下拉框了，
textarea标签，用来输入大段的文本，还可以设置cols和rows的数量，
所有的这些标签都是行内标签，所以需要用p标签来包裹，独占一行，
最外成就是一个form表单，


注意：
需要输入的内容可以不设置value，只设置name就可以，比如text，email，date，file，testarea，
但是那些需要选中的内容，一定要设置name，也一定要设置value，后端要获取的，比如radio，CheckBox，select，hidden，
还有一些可以不设置name，但是要有value，比如submit，reset，button，这个value就是按钮的名字，

 

 

###########################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--form表单
前后端有交互使用form表单，
form表单是用来提交数据的，
form表单就像是一个容器，本身是不展示什么内容的，
input框必须要有name，构成一个键值对，传到后端，后端就可以识别这个键值对，
-->

<!--写一个注册页面-->
<!--action 控制往哪里提交，-->
<!--method这个是提交方式，不写默认是get，-->
<!--enctype="multipart/form-data"，这个是数据提交的时候格式，有文件的时候，一定是要multipart/form-data，
默认是：application/x-www-form-urlencoded-->
<!--autocomplete="off"，H5有自动补全的功能，就是输入内容会有提示，你可以关闭，-->
<!--novalidate，加上这个就不做校验了，-->
<form action="" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
    <!--readonly，这是只读，value是给这个input框增加默认值，-->
    <!--placeholder这个会默认展示，但是不影响输入，可以使用js，在鼠标点击的时候，这个默认的展示值消失-->
    <!--disabled，不可用-->
    <p>用户名：
        <input name="user" type="text" readonly value="小美">
        <input name="user" type="text" placeholder="小美" disabled>
    </p>

    <p>
        <label for="a1">用户名：</label>
        <input id="a1" name="user" type="text" readonly value="小美">
        <input name="user" type="text" placeholder="小美" disabled>
    </p>

    <p>密码：
        <input name="pwd" type="text">
    </p>
    <!--这个email类型模式是会自动校验格式的，如果不做校验，可以增加一个form表单的属性，novalidate-->
    <p>邮箱：
        <input name="email" type="email">
    </p>

    <!--比如用户修改一条信息，提交的时候需要有id，但是我又不想用户改id，那就需要把id隐藏-->
    <p>
        <input type="hidden" value="hidden">
    </p>

    <!--这种单选框，必须要有name和value，这样构成键值对，才可以-->
    <!--checked，这是默认选中-->
    <p>性别：
        <input name="gender" type="radio" value="1"> 男
        <input name="gender" type="radio" value="0"> 女
        <input checked name="gender" type="radio" value="0"> 保密
    </p>

    <!--label标签可以不使用，但是标准的写法是使用label标签的，
    使用了label标签，点击文字也能选中这个单选按钮，否则必须是点击这个按钮才可以选中
    -->
    <p>性别2：

        <!--第一种label标签的写法-->
        <label for="r1"> 男</label>
        <input id="r1" name="gender" type="radio" value="1">

        <!--第二种label标签的写法-->
        <label> 男
            <input name="gender" type="radio" value="1">
        </label>


        <label for="r2">女</label>
        <input id="r2" name="gender" type="radio" value="0">

        <label for="r3">保密</label>
        <input id="r3" checked name="gender" type="radio" value="0">
    </p>


    <p>爱好：
        <input name="hobby" type="checkbox" value="lanqiu"> 篮球
        <input name="hobby" type="checkbox" value="zuqiu"> 足球
        <input name="hobby" type="checkbox" value="shuangseqiu"> 双色球
    </p>

    <p>地址：
        <!--selected默认选中一个下拉选项-->
        <select name="address1" id="1">
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
        <!--multiple，这是设置一个下拉框支持多选-->
        <select name="address1" id="11" multiple>
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>

        <select name="address2" id="2">
            <optgroup label="北京">
                <option value="cy">朝阳</option>
                <option value="hd">海淀</option>
                <option value="cp">昌平</option>
            </optgroup>
            <optgroup label="上海">
                <option value="pd">浦东</option>
                <option value="hp">黄埔</option>
                <option value="bs">宝山</option>
            </optgroup>

        </select>
    </p>
    <p>备注：
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </p>
    <!--这种文件，后端需要接收，然后使用with open进行存储-->
    <p>头像：
        <input name="test" type="file">
    </p>
    <p>生日：
        <input name="birthday" type="date">
    </p>

    <!--一定要有提交按钮，而且type一定要是submit，否则点击提交是无效的，-->
    <p>
        <input type="submit" value="提交">
    </p>
    <!--这个button，可以使用js给他绑定事件-->
    <p>
        <input type="button" value="button">
    </p>
    <p>
        <input type="reset" value="重置">
    </p>
</form>


</body>
</html>

 

 

###############     结束线    ################

 

 

###############     结束线     ################

标签
form表单提交
html代码
input
嵌套
select
form
label
html文件
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!