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

二、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. ThreadPoolExecutor线程池任务执行失败的时候会怎样

    接上一篇 <JDK1.8中的线程池> 1.  任务执行失败时的处理逻辑 1.1.  Worker Worker相当于线程池中的线程 可以看到,Worker有几个重要的属性: thread ...

  2. Python爬虫入门教程 11-100 行行网电子书多线程爬取

    行行网电子书多线程爬取-写在前面 最近想找几本电子书看看,就翻啊翻,然后呢,找到了一个 叫做 周读的网站 ,网站特别好,简单清爽,书籍很多,而且打开都是百度网盘可以直接下载,更新速度也还可以,于是乎, ...

  3. Android 开发工具类 18_NetWorkUtil

    检测网络的一个工具包: 1.网络是否可用: 2.判断是否有网络连接: 3.判断 WIFI 网络是否可用: 4.判断 MOBILE 网络是否可用; 5.获取当前网络连接的类型信息: 6.获取当前的网络状 ...

  4. 阿里云—Gartner 2018 亚太区WAF魔力象限唯一云WAF提供商

    近日,Gartner发布亚太区2018年度Web应用防火墙(简称“WAF”)魔力象限报告,阿里云WAF凭借成熟的产品能力和完善的服务体系成功入围,且是唯一一家进入该魔力象限的云WAF提供商. 报告指出 ...

  5. 看看.NET Core几个Options的简单使用

    前言 配置,对我们的程序来说是十分重要的一部分.或多或少都会写一部分内容到配置文件中去. 由其是在配置中心(Apollo等)做起来之前,配置文件一定会是我们的首选. 在.NET Core中,习惯的是用 ...

  6. Ruby数组(1)：基本用法

    数组 Ruby中的数组是一个容器,数组中的每个元素都是一个对象的引用. 注意,Array类中包含了Enumerable模块,所以Enumerable中的方法也都能使用,例如Enumerable中的re ...

  7. 一统江湖的大前端（2）—— Mock.js + Node.js 如何与后端潇洒分手

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  8. 第53章 结束会话端点(End Session Endpoint) - Identity Server 4 中文文档(v1.0.0)

    结束会话端点可用于触发单点注销(请参阅规范). 要使用结束会话端点,客户端应用程序会将用户的浏览器重定向到结束会话URL.用户在会话期间通过浏览器登录的所有应用程序都可以参与注销. 注意 终端会话端点 ...

  9. hive 中遇到的正则

    1.提取科室中,"科"字前面的内容 regexp_extract(t1.doctor_department_format,'(.*)科') 2.去除字符串中的数字 第一种方式: S ...

  10. Nginx 初識

    今天簡單了解了一下Nginx,并在本機安裝,并簡單配置了一下,道理什麼的還不懂,就是看能不能跑起來. 1.安裝從官網下載就好,把文件隨便解壓在一個英文目錄裡面. 然後修改配置文件,修改的內容如下: 2 ...