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

二、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. EF之Code First代码优先

    1.前言 通过英文可知,表示的是代码优先,一般创建EF都是先创建数据库,创建根据数据库的EF实体模型,而code - first 则是反过来!... 2.代码实战 我们这次创建的不是原来的数据库EF设 ...

  2. MVC中的下载文件及上传

    前言:最近做的项目中用到了文件下载与上传,一下子想不起来,只能进行百度,为了方便自己做了一个小demo,特此写了这篇小笔记 1.页面方面: 2.控制器方面 namespace MvcUpload.Co ...

  3. 【烂笔头】adb命令篇

    1.一个自动安装SystemUI.apk的脚本文件push-SystemUI.bat: adb rootadb remountadb push ./SystemUI.apk system/priv-a ...

  4. centos7默认防火墙firewalld

    1.开关 启动: systemctl start firewalld 查看状态: systemctl status firewalld  停止: systemctl disable firewalld ...

  5. ELK-安装kibana

    注意:在下载tar包的时候需要注意下安装的es版本号,按照官网的说明版本是对应一致的. #下载tar包$ wget https://artifacts.elastic.co/downloads/kib ...

  6. 克拉克拉(KilaKila)：大规模实时计算平台架构实战

    克拉克拉(KilaKila):大规模实时计算平台架构实战 一.产品背景:克拉克拉(KilaKila)是国内专注二次元.主打年轻用户的娱乐互动内容社区软件.KilaKila推出互动语音直播.短视频配音. ...

  7. k8s重要概念及部署k8s集群（一）--技术流ken

    重要概念 1. cluster cluster是 计算.存储和网络资源的集合,k8s利用这些资源运行各种基于容器的应用. 2.master master是cluster的大脑,他的主要职责是调度,即决 ...

  8. Django 系列博客（十四）

    Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...

  9. plsql的database下拉为空，如何解决？

    如何解决plsql的database下拉为空? 为什么plsql的database下拉为空?我在tnsnames.ora中设置了字符串ORCL,疑惑了我好久,在网上找了许久解决方案,终于是解决了!如下 ...

  10. 使用Linq查找重复

    namespace RemoveTheSame { class Program { static void Main(string[] args) { List<User> list = ...