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

二、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>

<!DOCTYPE html>   <!--这个是浏览器解释的规则，统一的解释规范 -->

<!--HTML里只能有一个HTML标签。html标签里只能有一个head标签和一个body标签，

html里的lang叫做标签的属性，定义语言没什么用。-->

<html lang="en">

<head>   <!--head里的所有标签只有title看得见 -->

        <!--meta是自闭合标签，自闭合标签很少，pycharm可以自动提示-->

    <meta charset="UTF-8">
　　 <!-- 指定文档的内容类型为html和编码类型utf-8 -->
　　 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!--

    <meta http-equiv="Refresh" Content="30" />  <!--过30秒自动刷新，很少用

    <meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com" /> <!-- 过几秒跳转到百度

    -->

    <meta name="keywords" content="搜索引擎可以通过关键字搜出来的" />

    <meta name="description" content="这里写关于网站的介绍，描述等" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 强制IE浏览器的渲染方式，默认使用chrome来渲染，然后再按照IE该浏览器的最新版本来渲染-->

    <title>good boy</title>

    <link rel="icon" href="image/favicon.ico" />        <!--搞title处的图标-->

</head>

<body>

身体

</body>

</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

<form  action="http://localhost:8888/index" method="get" enctype="application/x-www-form-urlencoded">

输入用户名：<input type="text" name="user" />

密码：     <input type="password" name="pwd" />

单纯的按钮：<input type="button" value="提交"/>

提交form表单：<input type="submmit" value="登录"/>

<form/>

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

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

补：日期时间选择框

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

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

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

type="text"  type="password"  type="button" type="submmit"含义  
value：默认值

placeholder： 这是阴影显示  
disabled="disabled"：按钮变灰色  
name属性：服务端取数据的时候用
单选框：checked="checked"默认选中

name一样的标签互斥。将value的值提交到后台

男：<input type="radio" name="gender" value="1" checked="checked">

女：<input type="radio" name="gender" value="2">

保密：<input type="radio" name="gender" value="3">

复选框：checked="checked"默认选中

爱好提交到后台，后台根据favor批量得到列表

<p>爱好<p/>

篮球：<input type="checkbox" name="favor" value="1" checked="checked">

足球：<input type="checkbox" name="favor" value="2">

橄榄球：<input type="checkbox" name="favor" value="3">

<p>技能<p/>

Linux：<input type="checkbox" name="skill" value="1">

Python：<input type="checkbox" name="skill" value="2">

上传文件

必须form里加上 enctype="multipart/form-data"才能上传文件,

<form enctype="multipart/form-data">

<p>文件<p/>

<input type="file" name="file_name"/>

<input type="submmit" value="提交"/>

<form />

重置按钮：把表单里的数据还原成一开始的状态

<form>

    <input type="reset" value="重置"/>

<form/>

4.3，label+input标签

点文字使得关联的标签获取光标

<label  for="username">用户名：</label>

<input id="username" type="text" name="user">

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

多行文本输入：后台通过name拿数据，默认值放中间,cols设置行,rows设置列
　　placeholder="请填自我介绍"

<textarea cols="20" rows="5" name="meno">默认值</textarea>

下拉框一：选择北京或上海,通过name拿数据，把value提交上去,selected默认选中，size>1为滚动列表，否则为下拉框

<select name="city">

    <option value="1">北京</option>

    <option value="2" selected="selected">上海</optiion>

</select>

列表框单选：

<select name="city" size="10">

    <option value="1">北京</option>

    <option value="2" selected="selected">上海</optiion>

</select>

列表框多选：

<select name="city" multiple="multiple" size="2">

    <option value="1">北京</option>

    <option value="2" selected="selected">上海</optiion>

</select>

对下拉框分组显示：组名不能选

<select name="city">

    <optgroup label="河北省">

        <option value="1">石家庄</option>

        <option value="2">邯郸</optiion>

    </optgroup>

    <optgroup label="山西省">

        <option value="1">吕梁</option>

        <option value="2">长治</optiion>

    </optgroup>

</select>

4.5，a标签，链接和锚点

a标签做跳转和做锚点(跳到某个章节)。_black是打开新标签页，_self是默认值在当前页面打开，title是鼠标放上去显示的内容

<a href="www.baidu.com" target="_black" title="百度一下">百度</a>

<a href="a.zip">下载压缩包</a>
<a href="#">跳转到顶部</a>
<a href="#p1">跳转到id为p1的标签</a>

<a href="javascript:alert(1)">点击弹窗</a>

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

src为图片路径，如果图片过大style设置高度宽度，如果图片找不到，会显示alt的内容，鼠标放上去会提示title的内容。如果想点击图片跳转就用a标签把图片包起来

<a href="www.aaa.com">

<img src="c:\\user\\1.jpg" style="height:200px;width:200px;" alt="美女"  title="大美女">

</a>


ol标签的属性：
type:列表标识的类型
　　1：数字
　　a：小写字母
　　A：大写字母
　　i：小写罗马字符
　　I：大写罗马字符
ul标签属性：
type：列表标识的类型
　　disc：实心圆
　　circle：空心圆
　　square：实心矩形
　　none：不显示标识

无序列表,前面显示“点”

<ul>

    <li>第一章</li>

    <li>第二章</li>

    <li>第三章</li>

</ul>

有序列表，前面显示数字

<ol>

    <li>首先</li>

    <li>其次</li>

    <li>最后</li>

</ol>

列表，标题-内容的形式

<dl>

    <dt>水果</dt>

        <dd>橘子</dd>

        <dd>香蕉</dd>

    <dt>蔬菜</dt>

        <dd>菠菜</dd>

        <dd>洋葱</dd>

</dl>

4.7，表格<table>

表格，thead是表头，tbody是内容。
border显示边框，cellspacing边框宽度

<table border="1" cellspacing="0">

    <thead>

        <tr>

            <th>主机名</th>

            <th>端口</th>

            <th>操作</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1.1.1.1</td>

            <td>80</td>

            <td>查看</td>

        </tr>

    </tbody>
    <tfoot>
　　　　 <tr>
　　　　　　    <td>表格底部</td>
　　　　　　　  <td>表格底部</td>
　　　　　　　  <td>表格底部</td>
　　　　 </tr>
    </tfoot>

</table>

横向进行2列合并：在td里加  colspan="2"

纵向进行2行合并：在td里加  rowspan="2"

4.8，fieldset标签，了解

<fieldset>

    <legend>登陆</legend>

    用户名：<input>

    密码：<input>

</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. 关于ML.NET v0.7的发布说明

    我们很高兴宣布推出ML.NET 0.7--面向.NET开发人员的最新版本的跨平台和开源机器学习框架(ML.NET 0.1发布于// Build 2018).此版本侧重于为基于推荐的ML任务提供更好的支 ...

  2. Python爬虫入门教程 9-100 河北阳光理政投诉板块

    河北阳光理政投诉板块-写在前面 之前几篇文章都是在写图片相关的爬虫,今天写个留言板爬出,为另一套数据分析案例的教程做做准备,作为一个河北人,遵纪守法,有事投诉是必备的技能,那么咱看看我们大河北人都因为 ...

  3. 外接程序 VMDebugger 未能加载或导致了异常 修复

    单击进入 是 visual studio   在 VMWARE 菜单栏上 单击 右键,出现如图,然后选择  自定义(C)...   打开 自定义 工具栏 里 选中 VMware 然后单击 删除 按钮 ...

  4. 【ASP.NET Core快速入门】（四）在CentOS上安装.NET Core运行时、部署到CentOS

    下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows 第一步:Add the dotnet product feed( ...

  5. 【c#】RabbitMQ学习文档（七）C# API

    今天这篇博文是我翻译的RabbitMQ的最后一篇文章了,介绍一下RabbitMQ的C#开发的接口.好了,言归正传吧. Net/C# 客户端 API简介 主要的命名空间,接口和类 定义核心的API的接口 ...

  6. Hibernate【inverse和cascade属性】知识要点

    Inverse属性 Inverse属性:表示控制权是否转移.. true:控制权已转移[当前一方没有控制权] false:控制权没有转移[当前一方有控制权] Inverse属性,是在维护关联关系的时候 ...

  7. ASP.NET Core 2.1 : 十二.内置日志、使用Nlog将日志输出到文件

    应用离不开日志,虽然现在使用VS有强大的调试功能,开发过程中不复杂的情况懒得输出日志了(想起print和echo的有木有),但在一些复杂的过程中以及应用日常运行中的日志还是非常有用. ASP.NET ...

  8. Python机器学习笔记 使用scikit-learn工具进行PCA降维

    之前总结过关于PCA的知识:深入学习主成分分析(PCA)算法原理.这里打算再写一篇笔记,总结一下如何使用scikit-learn工具来进行PCA降维. 在数据处理中,经常会遇到特征维度比样本数量多得多 ...

  9. 关于跨DB增量（增、改）同步两张表的数据小技巧

    有些场景下,需要隔离不同的DB,彼此DB之间不能互相访问,但实际的业务场景又需要从A DB访问B DB的情形,这时怎么办?我认为有如下常规的三种方案: 1.双方提供RESET API,需要访问不同DB ...

  10. FastReport编程方式给Picture控件赋值

    public Image BytesToImage(Byte[] buffer) { var ms = new MemoryStream(buffer, 0, buffer.Length); retu ...