前端知识点总结(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.降低模块之间 ...
随机推荐
- javascript arguments参数问题
function f(a, b, c){ alert(arguments.length); // result: "2" a = 100; alert(arguments[0]); ...
- Git应用—02各种冲突场景处理（转载）
Git冲突与解决方法 https://www.cnblogs.com/gavincoder/p/9071959.html https://www.liaoxuefeng.com/wiki/001373 ...
- Mobile First！ Wijmo 5 之 架构
CSDN移动开发频道率先报道的<Mobile First!jQuery UI组件集Wijmo五年最大更新>引起开发者极大关注. 本文就开发者关心的话题之一架构,展开叙述. Wijmo 5是 ...
- Fit项目图片上传和云存储的调通
项目中关于动作的说明需要相应的配图,这样可以更直观的说明动作要点.本篇主要为项目中动作的新增和编辑做准备,确定适合场景的上传操作逻辑以及图片的存储和加载的方法. 一 上传方案 a) 本来所用的模板中是 ...
- android系统通过图片绝对路径获取URI的三种方法
最近做项目要通过图片的绝对路径找到图片的URI,然后删除图片,小小总结一下获取URI的方法,亲自试验在 android 4.1.3的系统上都是可用的. 1.将所有的图片路径取出,遍历比较找到需要的路径 ...
- scrapy系列（一）——Python 爬虫框架 Scrapy1.2 Windows 安装教程
scrapy作为一个成熟的爬虫框架,网上有大量的相关教程供大家选择,尤其是关于其的安装步骤更是丰富的很.在这里我想记录下自己的相关经验,希望能给大家带来点帮助. 在scrapy0.24版之前,安装sc ...
- 利用python中的gensim模块训练和测试word2vec
word2vec的基础知识介绍参考上一篇博客和列举的参考资料. 首先利用安装gensim模块,相关依赖如下,注意版本要一致: Python >= 2.7 (tested with version ...
- 简述 Spring Cloud 是什么2
一.概念定义 Spring Cloud是一个微服务框架,相比Dubbo等RPC框架, Spring Cloud提供的全套的分布式系统解决方案. Spring Cloud对微服务基础框架Ne ...
- sql server 转置 和实现随机分配和一串代码的含义拼在一行
1.sql server 转置很容易搜到方法,一般需要手动写转置的列项,如果多时会比较烦,下面试了省事的方法: --案例需求数据 ----方法一:if object_id('tempdb.dbo.#s ...
- SQLSERVER 死锁
select request_session_id spid, OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tra ...