一、前端基础包括哪些？如何理解

二、css，js引入_及head中其他标签

三、特殊符号

四、常见的标签

4.1，form表单

4.2，input系列（单选框、复选框、input传文件、重置）

4.3，label+input标签

4.4，多行文本框，下拉框单选，列表框多选

4.5，a标签，链接和锚点

4.6，图片img，列表（无序列表ul，有序列表ol，标题+内容列表）

4.7，表格<table>

4.8，fieldset标签，了解

------------------------------------------------------------------------------------------------

一、前端基础包括哪些？如何理解

前端：不要求多，基础的20个记住就行了。
三把利器：
HTML：赤裸裸的人
　　- 20个标签
　　一套规则，浏览器认识的规则
　　开发者：
　　学习HTML规则
　　开发后台程序：
　　　　-写HTML文件（充当模板的作用）
　　　　- 数据库获取数据，然后替换到HTML文件
　　　　- 本地测试，直接用浏览器去解析HTML就行了
CSS：给人穿衣服
　　- 颜色
　　- 位置
JS：让它动起来

浏览器作为客户端的时候，
　　一次请求，一次响应，连接断开。是无状态的
　　和socket不一样，socket只要两边不断，可以一直通信
　　socket服务端是所有web框架的本质。
一、服务器给浏览器的永远是一串字符串。
二、字符串的格式浏览器可以解析，呈现出效果，所以学的是浏览器展示的规则

可以把发送给浏览器的字符串的某部分做成活动的，从数据库中取。
那么这样HTML实际上变成了一个模板

=========================================================================

FAQ：body里直接写内容不行吗，非要用标签干嘛？

答：用标签可以找到对应包括的字符串，可以实现一些动态的东西，改属性等

FAQ：可以直观查看标签的效果吗？

答：页面上点右键“审查元素”或“检查”可以看效果。还可以查看标签的css样式

二、css，js引入_及head中其他标签

链接样式(外)：

css：   <link rel="stylesheet"   href="css/index.css">

js：   <script type="text/javascript" src="js/other.js"></script>

链接样式(内)：

css:      <style type="text/css">   .....     <style>

js:   <script type="text/javascript">   .... </script>

  1. <!DOCTYPE html>   <!--这个是浏览器解释的规则，统一的解释规范 -->
  2. <!--HTML里只能有一个HTML标签。html标签里只能有一个head标签和一个body标签，
  3. html里的lang叫做标签的属性，定义语言没什么用。-->
  4. <html lang="en">
  5. <head>   <!--head里的所有标签只有title看得见 -->
  6.         <!--meta是自闭合标签，自闭合标签很少，pycharm可以自动提示-->
  7.     <meta charset="UTF-8">
    　　 <!-- 指定文档的内容类型为html和编码类型utf-8 -->
    　　 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8.     <!--
  9.     <meta http-equiv="Refresh" Content="30" />  <!--过30秒自动刷新，很少用
  10.     <meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com" /> <!-- 过几秒跳转到百度
  11.     -->
  12.     <meta name="keywords" content="搜索引擎可以通过关键字搜出来的" />
  13.     <meta name="description" content="这里写关于网站的介绍，描述等" />
  14.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  15.     <!-- 强制IE浏览器的渲染方式，默认使用chrome来渲染，然后再按照IE该浏览器的最新版本来渲染-->
  16.     <title>good boy</title>
  17.     <link rel="icon" href="image/favicon.ico" />        <!--搞title处的图标-->
  18.  
  19. </head>
  20. <body>
  21. 身体
  22. </body>
  23. </html>

三、特殊符号

符号一般用来打空格，转义等。
常见符号：&nbsp; &gt等
更多符号：www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

四、常见的标签

4.1，form表单

a、放到form里面就把form里面的内容提交，否则无法提交

b、submmit才能提交表单

c、不写默认提交方式是“get”，可以改为“post”，get把数据放在请求头提交，post把数据放在body里提交

d、enctype编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器

1、application/x-www-form-urlencoded默认，允许将普通字符，特殊字符都提交给服务器，不允许提交文件

2、multipart/form-data,允许被将文件提交给服务器

3、text/plain  只允许提交普通字符，特殊字符。文件等都无法提交

注意：如果有文件需要提交给服务器，method必须为post，enctype必须为multipart/form-data

  1. <form  action="http://localhost:8888/index" method="get" enctype="application/x-www-form-urlencoded">
  2.  
  3. 输入用户名：<input type="text" name="user" />
  4.  
  5. 密码：     <input type="password" name="pwd" />
  6.  
  7. 单纯的按钮：<input type="button" value="提交"/>
  8.  
  9. 提交form表单：<input type="submmit" value="登录"/>
  10.  
  11. <form/>

4.2，input系列（单选框、复选框、input传文件、日期/时间选择框、重置）

---------------

补：日期时间选择框

选日期： <input type="date">

选日期-时间：  <input type="datetime-local">

----------------

  1. type="text"  type="password"  type="button" type="submmit"含义  
    value：默认值
  2. placeholder： 这是阴影显示  
    disabled="disabled"：按钮变灰色  
    name属性：服务端取数据的时候用
  1. 单选框：checked="checked"默认选中
  2. name一样的标签互斥。将value的值提交到后台
  3. 男：<input type="radio" name="gender" value="1" checked="checked">
  4. 女：<input type="radio" name="gender" value="2">
  5. 保密：<input type="radio" name="gender" value="3">
  6.  
  7. 复选框：checked="checked"默认选中
  8. 爱好提交到后台，后台根据favor批量得到列表
  9. <p>爱好<p/>
  10. 篮球：<input type="checkbox" name="favor" value="1" checked="checked">
  11. 足球：<input type="checkbox" name="favor" value="2">
  12. 橄榄球：<input type="checkbox" name="favor" value="3">
  13. <p>技能<p/>
  14. Linux：<input type="checkbox" name="skill" value="1">
  15. Python：<input type="checkbox" name="skill" value="2">
  16.  
  17. 上传文件
  18. 必须form里加上 enctype="multipart/form-data"才能上传文件,
  19. <form enctype="multipart/form-data">
  20. <p>文件<p/>
  21. <input type="file" name="file_name"/>
  22. <input type="submmit" value="提交"/>
  23. <form />
  24.  
  25. 重置按钮：把表单里的数据还原成一开始的状态
  26. <form>
  27.     <input type="reset" value="重置"/>
  28. <form/>

4.3，label+input标签

  1. 点文字使得关联的标签获取光标
  2. <label  for="username">用户名：</label>
  3. <input id="username" type="text" name="user">

4.4，多行文本框，下拉框单选，列表框多选

  1. 多行文本输入：后台通过name拿数据，默认值放中间,cols设置行,rows设置列
    　　placeholder="请填自我介绍"
  2. <textarea cols="20" rows="5" name="meno">默认值</textarea>
  3.  
  4. 下拉框一：选择北京或上海,通过name拿数据，把value提交上去,selected默认选中，size>1为滚动列表，否则为下拉框
  5. <select name="city">
  6.     <option value="1">北京</option>
  7.     <option value="2" selected="selected">上海</optiion>
  8. </select>
  9. 列表框单选：
  10. <select name="city" size="10">
  11.     <option value="1">北京</option>
  12.     <option value="2" selected="selected">上海</optiion>
  13. </select>
  14. 列表框多选：
  15. <select name="city" multiple="multiple" size="2">
  16.     <option value="1">北京</option>
  17.     <option value="2" selected="selected">上海</optiion>
  18. </select>
  19. 对下拉框分组显示：组名不能选
  20. <select name="city">
  21.     <optgroup label="河北省">
  22.         <option value="1">石家庄</option>
  23.         <option value="2">邯郸</optiion>
  24.     </optgroup>
  25.     <optgroup label="山西省">
  26.         <option value="1">吕梁</option>
  27.         <option value="2">长治</optiion>
  28.     </optgroup>
  29. </select>

4.5，a标签，链接和锚点

  1. a标签做跳转和做锚点(跳到某个章节)。_black是打开新标签页，_self是默认值在当前页面打开，title是鼠标放上去显示的内容
  2. <a href="www.baidu.com" target="_black" title="百度一下">百度</a>
  3. <a href="a.zip">下载压缩包</a>
    <a href="#">跳转到顶部</a>
    <a href="#p1">跳转到id为p1的标签</a>
  4. <a href="javascript:alert(1)">点击弹窗</a>

4.6，图片img，列表（无序列表ul，有序列表ol，标题+内容列表）

  1. src为图片路径，如果图片过大style设置高度宽度，如果图片找不到，会显示alt的内容，鼠标放上去会提示title的内容。如果想点击图片跳转就用a标签把图片包起来
  2. <a href="www.aaa.com">
  3. <img src="c:\\user\\1.jpg" style="height:200px;width:200px;" alt="美女"  title="大美女">
  4. </a>

  5. ol标签的属性：
    type:列表标识的类型
    　　1：数字
    　　a：小写字母
    　　A：大写字母
    　　i：小写罗马字符
    　　I：大写罗马字符
    ul标签属性：
    type：列表标识的类型
    　　disc：实心圆
    　　circle：空心圆
    　　square：实心矩形
    　　none：不显示标识
  6.  
  7. 无序列表,前面显示“点”
  8. <ul>
  9.     <li>第一章</li>
  10.     <li>第二章</li>
  11.     <li>第三章</li>
  12. </ul>
  13. 有序列表，前面显示数字
  14. <ol>
  15.     <li>首先</li>
  16.     <li>其次</li>
  17.     <li>最后</li>
  18. </ol>
  19. 列表，标题-内容的形式
  20. <dl>
  21.     <dt>水果</dt>
  22.         <dd>橘子</dd>
  23.         <dd>香蕉</dd>
  24.     <dt>蔬菜</dt>
  25.         <dd>菠菜</dd>
  26.         <dd>洋葱</dd>
  27. </dl>

4.7，表格<table>

  1. 表格，thead是表头，tbody是内容。
    border显示边框，cellspacing边框宽度
  2. <table border="1" cellspacing="0">
  3.     <thead>
  4.         <tr>
  5.             <th>主机名</th>
  6.             <th>端口</th>
  7.             <th>操作</th>
  8.         </tr>
  9.     </thead>
  10.     <tbody>
  11.         <tr>
  12.             <td>1.1.1.1</td>
  13.             <td>80</td>
  14.             <td>查看</td>
  15.         </tr>
  16.     </tbody>
        <tfoot>
    　　　　 <tr>
    　　　　　　    <td>表格底部</td>
    　　　　　　　  <td>表格底部</td>
    　　　　　　　  <td>表格底部</td>
    　　　　 </tr>
        </tfoot>
  17. </table>
  18.  
  19. 横向进行2列合并：在td里加  colspan="2"
  20. 纵向进行2行合并：在td里加  rowspan="2"

4.8，fieldset标签，了解

  1. <fieldset>
  2.     <legend>登陆</legend>
  3.     用户名：<input>
  4.     密码：<input>
  5. </fieldset>

HTML---引入css,js | 常用标签示例的更多相关文章

  1. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  2. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  3. Spring Maven工程引入css,js

    1.CSS <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="t ...

  4. 关于idea easyui 引入css js

    1.引用官方网站 <link rel="stylesheet" type="text/css" href="http://www.w3cscho ...

  5. （4）WePHP 模板引入CSS js

    模板有两个定义了两个常量 父类已经定义好了 //模板常量 $dirStr=dirname($_SERVER['SCRIPT_NAME']); $dirStr=$dirStr=='\\'?NULL:$d ...

  6. CSS、常用标签属性

    div的样式:[width:宽度 :100像素.height:高度100px.background:背景颜色红色] 内嵌的形式:用<style type="text/css>&l ...

  7. thinkphp5 前台模板的引入css,js,images

    一:在公共的静态文件夹中建立我们模块的名称用来放置css,js,images 二:在配置文件config中定义需要的路径 三:在视图页面引入

  8. JS常用标签

    1.由来 JavaScript的出现就是为了解决,不需要将所有的表单数据全部提交到服务器. 2.添加 加载Js代码的三种方式: 第一种:<script></script>标签里 ...

  9. html+css+js实现标签页切换

    CSS部分: #Tab { margin:0 auto; width:640px; border:none; position:absolute; z-index:9; margin-left:320 ...

随机推荐

  1. H5本地存储sessionStorage和localStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  2. ASP.NET Core 四种方式绑定枚举值

    前言 本节我们来讲讲在ASP.NET Core MVC又为我们提供了哪些方便,之前我们探讨过在ASP.NET MVC中下拉框绑定方式,这节我们来再来重点看看枚举绑定的方式,充分实现你所能想到的场景,满 ...

  3. C# 《编写高质量代码改善建议》整理&笔记 --(一)基本语言篇

     题记:这是自己的观后感,工作两年了,本来打算好好学习设计模式,或者作为客户端深入了解GPU编程的,但是突然发现还有这么一本书. <编写高质量代码改善建议>,感觉这正是自己需要的. 我是做 ...

  4. Python的协程

    什么是协程 协程又叫做微线程,它是在单一线程内通过不断切换执行的.协程的切换不是上下文的切换也就是说不是CPU的执行任务的切换,比如CPU执行一会线程1,然后再执行一会线程2,在多核CPU上,Pyth ...

  5. Java 8的用法（泛型接口，谓词链）

    1.泛型接口 我们举个例子,以前来看一下JPA定义的写法: Specification接口为: public interface Specification<T> { Predicate ...

  6. 【ASP.NET Core快速入门】（十六）MVC开发：DbContextSeed初始化

    前言 由于我们现在每次EF实体模型变化的时候每次都是手动更改,我们想通过代码的方式让他自动更新,或者程序启动的时候添加一些数据进去 DbContextSeed初始化 首先,在Data文件夹下添加一个A ...

  7. Jenkins结合.net平台综合应用之使用FileZilla搭建ftp服务器

    上一节我们讲解了如何编译web项目,web项生成以后我们是手动复制到iis目录下的,这显然不符合devops初衷,这里我们讲解如何利用ftp协议把文件传到远程服务器的iis目录下. 这一讲分两部分一部 ...

  8. [总结] NOIP 前的考试记录

    sb博主又犯sb错误了! 他觉得以往模拟赛因为犯sb错误扔的分足足有1k分了! 于是他想记录一下自己犯的sb错误看看自己到底有多sb! 嗯就从今天开始吧 2018.9.28 1. 二分边界写错.骚什么 ...

  9. ROS 101

    https://www.clearpathrobotics.com/blog/2014/01/how-to-guide-ros-101/ 什么是ROS ROS(robot operating syst ...

  10. OpenCV在C#中应用—OpenCVSharp

    1.什么是OpenCVSharp    之前一直是基于OpenCV开发视觉算法,但C++语言对于GUI的开发相对于C#来说确实很不方便,之前就了解到C#下使用OpenCV可以使用EmguCV,这段时间 ...