前端知识点总结(html+css)部分
HTML
1、一套规则，浏览器认识的规则。
2、开发者：
学习Html规则
开发后台程序：
- 写Html文件（充当模板的作用） ******
- 数据库获取数据，然后替换到html文件的指定位置（Web框架） 3、本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试
4、编写Html文件 - doctype对应关系
- html标签，标签内部可以写属性 ====> 只能有一个
- 注释： <!-- 注释的内容 -->
5、标签分类
- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
title>老男孩</title>
6、
head标签中
- <meta -> 编码，跳转，刷新，关键字，描述，IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 搞图标，欠
- <style />欠
- <script> 欠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div> <textarea name="meno" >asdfasdf</textarea> <select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">南京</option>
<option value="4">成都</option>
</select> <input type="text" name="user" />
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" />
女：<input type="radio" name="gender" value="2" checked="checked"/>
Alex：<input type="radio" name="gender" value="3"/>
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1" />
足球：<input type="checkbox" name="favor" value="2" checked="checked" />
皮球：<input type="checkbox" name="favor" value="3" />
台球：<input type="checkbox" name="favor" value="4" checked="checked"/>
网球：<input type="checkbox" name="favor" value="5" />
<p>技能</p>
撩妹：<input type="checkbox" name="skill" checked="checked" />
写代码：<input type="checkbox" name="skill"/>
<p>上传文件</p>
<input type="file" name="fname"/>
</div> <input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
7、body标签
- 图标， > <
- p标签，段落
- br，换行
======== 小总结 =====
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
标签之间可以嵌套
标签存在的意义，css操作，js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div
- span
- input系列 + form标签
input type='text' - name属性，value="赵凡"
input type='password' - name属性，value="赵凡"
input type='submit' - value='提交' 提交按钮，表单
input type='button' - value='登录' 按钮 input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥）
input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest' - 重置 <textarea >默认值</textarea> - name属性
select标签 - name,内部option value, 提交到后台，size，multiple - a标签
- 跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复 - img
src
alt
title - 列表
ul
li
ol
li
dl
dt
dd
- 表格
table
thead
tr
th
tbody
tr
td
colspan = ''
rowspan = ''
- label
用于点击文件，使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
- fieldset
legend - 20个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header">
<div style="width: 980px;margin: 0 auto;">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div>
<div style="width: 980px;margin: 0 auto;">
<div style="float: left">
Logo
</div>
<div style="float: right">
<div style="height: 50px;width: 100px;background-color: #dddddd"></div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="background-color: red;">
<div style="width: 980px;margin: 0 auto;">
asdfsdf
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
前端知识点总结(html+css)部分的更多相关文章
- 前端知识点回顾——HTML，CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
- 前端知识点总结(HTML)
前端知识点总结(HTML) 一,头部常用的标签 1,link标签 (1),设置ico图标 <link rel="shortcut icon" href="favi ...
- Web 前端之HTML和CSS
Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- 前端总结·基础篇·CSS（一）布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- 前端总结·基础篇·CSS（三）补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- Vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...
随机推荐
- 洛谷P4438 [HNOI/AHOI2018]道路(dp)
题意 题目链接 Sol 每当出题人想起他出的HNOI 2018 Day2T3,他都会激动的拍打着轮椅 读题比做题用时长系列... \(f[i][a][b]\)表示从根到\(i\)的路径上,有\(a\) ...
- SAP MM 并非奇怪现象之MB5B报表查不到某一笔出库记录？
物料号:1301002696 工厂代码:2160 MB5B,如下查询条件, 查询结果中,期初与期末库存数量都是0,期间的出库入库数量都是0.事实上该物料期初应该是有库存的.并且我用MB51相同时间段查 ...
- 用Web Services来整合.NET和J2EE
互用性(Interoperability)问题说起来容易但通常实现起来却比较困难.尽管Web service曾承诺要提供最佳的解决方案来衔接基于.NET和J2EE的应用程序,但其过程却并不简单.我们发 ...
- Android开发专业名词及工具概述
前言: 系统的学习下Android开发中涉及到的一些专业名词 和Android开发工具 名词: 一.SDK(Software Development Kit) 软件开发工具包:一般都是一些软件工程师为 ...
- EventBus结合rxjava2和retrofit2网络获取
依赖: compile 'com.squareup.retrofit2:converter-gson:2.3.0'compile 'com.squareup.retrofit2:retrofit:2. ...
- couldn't locate lint-gradle-api-26.1.2.jar for flutter project
Could not find com.android.tools.lint:lint-gradle:26.1.2 当我尝试构建发行版本APK 时导致报这种错误,无法发行,针对自己的项目作出了相关修改, ...
- [20171120]关于find 软连接问题.txt
[20171120]关于find 软连接问题.txt --//上个星期为了测试oracle参数filesystemio_options,将数据库做了一次移动.但是我使用find对软链接目录查询时--/ ...
- python第七十六天--堡垒机完成
堡垒机windows ,linux 都通过测试初始化说明: #进入根目录 1.初始化表结构 #python3 bin/start.py syncdb 2.创建堡垒机用户 #python3 bin/st ...
- C#检测本机是否联网
public class Net { [DllImport("wininet")] private extern static bool InternetGetConnectedS ...
- php处理手机号中间的四位为星号****
在显示用户列表的场景中,一般用到手机号的显示时都需要对手机号进行处理,一般是把中间的四位换成星号****,我本人用php处理的思路是进行替换,用****替换手机号的中间四位 代码如下: $all_lo ...