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

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

三、特殊符号

符号一般用来打空格，转义等。
常见符号：  &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 | 常用标签示例的更多相关文章

WordPress引入css/js两种方法
WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...
第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
Spring Maven工程引入css,js
1.CSS <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="t ...
关于idea easyui 引入css js
1.引用官方网站 <link rel="stylesheet" type="text/css" href="http://www.w3cscho ...
（4）WePHP 模板引入CSS js
模板有两个定义了两个常量父类已经定义好了 //模板常量 $dirStr=dirname($_SERVER['SCRIPT_NAME']); $dirStr=$dirStr=='\\'?NULL:$d ...
CSS、常用标签属性
div的样式:[width:宽度 :100像素.height:高度100px.background:背景颜色红色] 内嵌的形式:用<style type="text/css>&l ...
thinkphp5 前台模板的引入css,js,images
一:在公共的静态文件夹中建立我们模块的名称用来放置css,js,images 二:在配置文件config中定义需要的路径三:在视图页面引入
JS常用标签
1.由来 JavaScript的出现就是为了解决,不需要将所有的表单数据全部提交到服务器. 2.添加加载Js代码的三种方式: 第一种:<script></script>标签里 ...
html+css+js实现标签页切换
CSS部分: #Tab { margin:0 auto; width:640px; border:none; position:absolute; z-index:9; margin-left:320 ...

随机推荐

【JVM虚拟机】（2）---GC 算法与种类
GC 算法与种类对于垃圾收集(GC), 我们需要考虑三件事情:哪些内存需要回收?如何判断是垃圾对象?垃圾回收算法有哪些? 一.GC的工作区域 1.不是GC的工作区域 (1)程序计数器.虚拟机栈和本地 ...
Apache生产配置
httpd.conf # # This is the main Apache HTTP server configuration file. It contains the # configurati ...
Python Bs4 回顾
BeautifulSoup bs4主要使用find()方法和find_all()方法来搜索文档. find()用来搜索单一数据,find_all()用来搜索多个数据 find_all()与find() ...
RecyclerView与ListView 对比浅析：缓存机制
一. 背景 PS:相关知识:ListView与RecyclerView缓存机制原理大致相似,如下图所示: 滑动过程中,离屏的ItemView即被回收至缓存,入屏的ItemView则会优先从缓存中获取, ...
[SQL]SQL 执行顺序
这个文章主要是防止我忘了 SQL 的执行顺序,解释的东西我都没怎么看懂.数据库渣如我- 逻辑查询处理阶段简介 FROM:对FROM子句中的前两个表执行笛卡尔积(Cartesian product)(交 ...
C#2.0 委托
委托委托是一个非常不错的设计,允许我们把方法做为参数传递,实现了开放閉放原则.在方法中我们只要有一个委托占位,调用者就可以传入符合签名的方法来做不同的操作,这也面向对象开发中多态的魅力. 但是在C# ...
使用Flume消费Kafka数据到HDFS
1.概述对于数据的转发,Kafka是一个不错的选择.Kafka能够装载数据到消息队列,然后等待其他业务场景去消费这些数据,Kafka的应用接口API非常的丰富,支持各种存储介质,例如HDFS.HBa ...
简单的SQL注入之2
Topic Link http://ctf5.shiyanbar.com/web/index_2.php 一.方法One sqlmap直接跑出来 1)暴库 2)爆表 3)爆段 4) 结果二.方法Tw ...
MySQL递归查询_函数语法检查_GROUP_CONCAT组合结果集的使用
1-前言: 在Mysql使用递归查询是很不方便的,不像Sqlserver可以直接使用声明变量,使用虚拟表等等.如:DECLARE,BEGIN ... END ,WHILE ,IF 等等. 在My ...
Java学习笔记之——Set容器
Set容器: 特点:无序.不重复 Set实现了Collection接口常用方法见API 遍历: 迭代器.foreach 常用类: HashSet: 底层结构:HashMap,使用其中的键来存储元素 ...

HTML---引入css,js | 常用标签示例