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

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

随机推荐

『The Captain 最短路建图优化』
The Captain(BZOJ 4152) Description 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小 ...
将dylib库嵌入macOS应用的方法
写作是一种习惯,稍微松懈,也许失去的就很多.过了一个年,居然很多天都没有更新,幸福的代价吧:) 标题的问题其实以前碰到过,不过当时在iOS,所以随手处理了没有重视. 而这次是在macOS,所使用的库, ...
《HelloGitHub月刊》第 06 期
前言 <HelloGitHub>月刊做到第06期了(已经做了6个月了),在GitHub上获得了100+的stars,虽然不多,但是我很知足了,说明有人觉得这个项目是有价值的.同时园子中的' ...
HotSpot虚拟机对象相关内容
一.对象的创建 1.类加载检查普通对象的创建过程:虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化 ...
Mybatis环境配置学习
Mybatis的使用环境配置步骤主要分为以下三步 1.导入jar包 2.创建mybatis的全局配置文件,并编写 3.创建mapper的配置文件一.导入jar包 --- (踩坑:这一步中的导入mys ...
自定义封装ajax，复制即可用
支持get.post请求 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
GitHub 开源的 MySQL 在线更改 Schema 工具【转】
本文来自:https://segmentfault.com/a/1190000006158503 原文:gh-ost: GitHub's online schema migration tool fo ...
修复UEFI模式下Manjaro Linux启动问题
上周在更新Manjaro Linux的时候误触了电源键,导致内核更新了一半系统强制关机,重启时正常进入grub但无法正常引导进入系统. 由于不想重装系统(一大堆环境和工具的配置还是相当繁琐的),加上初 ...
JQuery实现数组移除指定元素
公式: 数组.splice($.inArray(元素,数组),数量); 实例: var arr = ['a','b','c','d']; arr.splice($.inArray('c',arr),1 ...
C# 如何更改Word语言设置
一般在创建或者打开一个Word文档时,如果没有进行过特殊设置的话,系统默认的输入语言的是英语输入,但是为适应不同的办公环境,我们其实是需要对文字嵌入的语言进行切换的,因此,本文将介绍如何使用免费版组件 ...

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