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

# 前端三大部分

# 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;  注册

这是常用的，还有很多，用到的时候网上查

-->&lt;&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>

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

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

前端-html-长期维护的更多相关文章

  1. python后端面试第八部分：制作简历和如何面试--长期维护

    ###############     就业指导    ################ 这里面有套路,你懂了这个套路,你会找到更好的工作,你会更快的找到工作, ,如何制作简历,五颗星 ,如何投递简历 ...

  2. rest framework-解析器和渲染器-长期维护

    ###############   解析器   ############### # 解析器----数据解析器, # # 前端发送了json数据,在request的body里面, # 我们需要把json ...

  3. rest framework-分页-长期维护

    ###############  分页组件   ############### # 分页组件 # # django也有分页,rest framework也有分页,但是没有页面这个概念了, # 这个分页 ...

  4. rest framework-restful介绍-长期维护

    ###############   django框架-rest framework    ############### # django rest framework 框架 # 为什么学习这个res ...

  5. git基本操作-长期维护

    ###############    初识git    ############## """ git初识: 1,git是什么?git是一个帮助用户版本控制的软件, 2,g ...

  6. mysql数据库-进阶-长期维护

    ###############    视图    ############## """ 1.视图 视图:是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有 ...

  7. python后端面试第七部分：项目部分--长期维护

    ##################    项目部分       ####################### 1,你怎么测试自己的代码的?自测 2,开发使用windows还是Linux,虚拟环境的 ...

  8. python后端面试第四部分：django框架--长期维护

    1 列举Http请求中常见的请求方式  https://www.cnblogs.com/andy0816/p/12360866.html2 谈谈你对HTTP协议的认识.1.1 长连接  https:/ ...

  9. django框架进阶-form组件-长期维护

    ##################     form组件做了什么事情?      ####################### 之前web开发的模式,以注册为例 1,要有一个注册页面,然后有一个f ...

  10. 前端-bootstrap-长期维护

     ###############    bootstrap简介     ################ Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. ...

随机推荐

  1. javascript函数柯里化初探

    // 柯里化之前 function add(x,y,z){ return x+y+z; } add(1,2,3) // 6 // 柯里化之后 function curryAdd(x){ return ...

  2. 吴裕雄--天生自然 PHP开发学习：超级全局变量

    <!DOCTYPE html> <html> <body> <?php $x = 75; $y = 25; function addition() { $GL ...

  3. mui 上拉加载

    最近做到移动端页面的开发,需要mui 的上拉刷新功能,最后实现后整理代码如下: 1.需要引入的js <link href="../resource/css/mui.min.css&qu ...

  4. MLP神经网络 隐含层节点数的设置】如何设置神经网络隐藏层 的神经元个数

    神经网络 隐含层节点数的设置]如何设置神经网络隐藏层 的神经元个数 置顶 2017年10月24日 14:25:07 开心果汁 阅读数:12968    版权声明:本文为博主原创文章,未经博主允许不得转 ...

  5. h5-圆角的使用-案例安卓机器人

    1.圆角的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. Kerbernetes的Service资源管理

    Kerbernetes的Service资源管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.Service概述 1>.为什么需要Service资源 我们知道在Kube ...

  7. 清除input表单内容

    碰到几次情况,页面刷新或者从上级页面返回表单的内容依然遗留,很影响使用. <form action="" method="" autocomplete=& ...

  8. latex学习笔记----基本知识、文档排版

    1.空格和制表符等空白字符视为相同的空白距离,多个连续的空白字符等同为一个字符. 2.#  $  %  ^  _    {   }  ~ 在这些字符前面加上反斜线,就可以在文本中得到它们. 反斜线\不 ...

  9. linux安装nginx步骤

    转载自:https://blog.csdn.net/t8116189520/article/details/81909574,修改部分内容 本文已收录至博客专栏linux安装各种软件及配置环境教程中 ...

  10. Tooltips

    #include<windows.h> #include<Commctrl.h> #include"resource.h" #pragma comment( ...