第十三篇:HTML和CSS入门
一、HTML本质以及在WEB程序中的作用
1.一套规则,浏览器认识的规则。
2.开发者:
学习html规则
开发后台程序
- 写html文件(充当模板的作用)
- 数据库获取数据,然后替换到html文件的指定位置
3.本地测试
- 找到文件路径,直接浏览器打开
- pycharm打开;
4.编写html文件
- doctype对应关系
- html标签,标签内部可以写属性,只能有一个
- 注释: <!-- 注释内容 -->
5.标签分类:
- 自闭合标签
- 主动闭合标签
二、HTML的head内标签
head标签中
- <meta > 编码,跳转,刷新,关键字,描述,IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 图标,
- <style />
- <script >
三、HTML的body内标签
body标签
- 图标:  空格,> 大于号,< 小于号;
<p> 段落
<br> 换行
<h1> 标题
================
所有的标签分为:
块级标签:div(白板),h系列(加大加粗),p标签(段落和段落之间有间距),
行内标签(内联标签):span标签(白板),
标签之间可以嵌套
标签存在的意义,css操作,js操作;
ps:Chrome审查元素的使用
四、body内标签之lnput系列
- input系列 + form标签;
input type="text" 文本,name属性
input type="password" 密码,name属性
input type="submit" 提交表单按钮,value属性
input type="buttom" 按钮,value属性
input type="radio" name="gender" value="1" 单选(name相同互斥)
input type="checkbox" name="favor" value="1" 复选框(name批量获取数据)
默认被选中:checked="checked"
input tpye="file" 上传文件;依赖form表单的属性 enctype="multipart/form-data";
input tpye="reset" 重置
- textarea标签,多行文本
- <select name='city'> <option value='1'></option>,下拉框,
multiple="multiple" 多选框;size=10,显示多个;
- form标签,action="";methed="GET" or "POST"
五、超链接
- a标签,href,target属性,功能:跳转,
锚 href="#i3" <div id="i3"> 标签id不能重复;
六、图片及表格
- img标签 src属性,title,alt属性显示关键字;
- 列表;<ul><li>,<ol><li> <dl><dt><dd>
- 表格:
<table> 表
<thead>
<tr>
<th>
<tbody>
<tr> 行
<td> 列
合并单元格:
<td colspan="2"> 列合并;
<td rowspan="2"> 行合并;
七、fieldset标签和label标签
- label标签 for="idname" ,结合input使用;
<label for="username">用户名:<label>
<input id="username" tpye="text">
- fieldset 标签;legend
- div
- span
八、标签总结
- 20个标签
九、CSS选择器
1.在标签上设置style属性;
background-color:#2342345;
height:48px;
...
2.编写样式:
1.标签的style属性中可以写;
2.写在head标签style标签中;
- id选择器
#i1{
background-color:#2342345;
height:48px;
}
id="i1"
- class选择器(最常用的)
.c1 {}
class="c1"
- 注释 /* 注释内容 */
- 标签选择器
div {
height:48px;
}
所有的div标签设置此样式;
- 关联选择器(层级选择器)
.c1 div {
height:48px;
}
.c1类下面的div标签设置此样式;
- 组合选择器
.i1,.i2,.i3{
height:48px;
}
- 属性选择器
input[type="text"]{
height:48px;
}
对选择到的标签再通过属性筛选;
3.优先级,标签上的style优先,其他css按照编写顺序,就近原则;
4.引入css文件;<link ref="stylesheet" href="am.css" />
5.边框
border:1px solid red,宽度,样式,颜色
border-left border-top
6.height:48px; 高度
width:80%; 宽度
font-size:18px; 字体大小
text-aling:center; 水平居中
line-height:48px; 垂直居中
font-weight:bold; 字体加粗
十、CSS之float样式
7.float
float:left;让标签飘起来;块级标签也可以堆叠;
<div style="clear:both;">
十一、CSS之display样式
8.display:inline
display:block
display:inline-block
display:none 让标签消失;
行内标签无法设置高度宽度边距,块级标签可以设置;
十二、CSS之内外边距
9. padding 内边距,自身发生变化
margin(0,auto)外边距
实战练习:跑马灯
<html>
<body>
<div id="i1">欢迎领导莅临指导</div>
<script>
function func1(){
t=document.getElementById("i1")
t.in
}
setInterval()
</script>
</body>
</html>
第十三篇:HTML和CSS入门的更多相关文章
- Egret入门学习日记 --- 第十三篇(书中 5.2~5.3节 内容)
第十三篇(书中 5.2~5.3节 内容) 写日记已经十天多了,我发现越到后面,我书写的方式越来越程序化. 感觉渐渐失去了人类所谓的感情似的. 不过,没想到的是,书中的内容,很少出现了错误,我一路过来到 ...
- 第五篇 CSS入门 明白 三种嵌套形式,三种常用控制器
CSS入门 css是 层叠式样式表 css的作用是什么呢?举个抽象的例子啊,HTML是人,CSS则是衣服... css给html穿上衣服,有三种形式: 内嵌.内联.外联. 这三种形式,优先级为 ...
- Python开发【第十三篇】:jQuery(二)
http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展 ...
- H5教程(二),CSS入门(一)选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
- HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片
一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...
- HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
- CSS入门指南-4:页面布局
这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...
- 解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘(译)
解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘(译) http://improve.dk/the-anatomy-of-row-amp-page-compre ...
- 第十三篇 Integration Services:SSIS变量
本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...
- Python之路【第十三篇】:jQuery -暂无内容-待更新
Python之路[第十三篇]:jQuery -暂无内容-待更新
随机推荐
- RocketMQ(11) 消息重试机制和死信队列
七.消息发送重试机制 1 说明 Producer对发送失败的消息进行重新发送的机制,称为消息发送重试机制,也称为消息重投机制. 对于消息重投,需要注意以下几点: 生产者在发送消息时,若采用同步或异步发 ...
- Java //在150之内 是三的倍数 输出Zzz 是5个倍数输出 Lll 是7的倍数输出zlzl
1 //在150之内 是三的倍数 输出Zzz 是5个倍数输出 Lll 是7的倍数输出zlzl 2 int i =1; 3 for(i = 1; i<=150;i++) 4 { 5 System. ...
- 深入浅出Java多线程(十):CAS
引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第十篇内容:CAS.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在多线程编程中,对共享资源的安全访问和同步 ...
- Mysql 增删改查语言系列
Mysql 数据语言系列 目录 Mysql 数据语言系列 一.数据定义语言 DDL 1 数据库规范 2 DDL 语言使用 2 创建视图 二. 数据操纵语言 DML 1 插入语法 2 更新语法 3 删除 ...
- git commit大文件后无法删除或撤回
可以使用版本回退的功能 先用git log 查看历史提交 用 git reset --soft 上面的编号 回退到历史提交的版本 再重新commit即可
- 删除无用的docker镜像与容器
docker rm `docker ps -a | grep Exited | awk '{print $1}'` 删除异常停止的docker容器 docker rmi -f `docker imag ...
- Zabbix6.0使用教程 (五)—zabbix从二进制包安装上篇
大家好,我是乐乐.上一期我们已经讲过从源代码安装zabbix,本期着重讲从二进制包安装zabbix. 当我们在ZABBIX官方存储库可以看到,Zabbix SIA 提供如下官方RPM和DEB包: ·R ...
- Web service是什么? (转载)
转载自 : Web service是什么?- 阮一峰的网络日志 作者: 阮一峰 日期: 2009年8月26日 我认为,下一代互联网软件将建立在Web service(也就是"云") ...
- C++小细节
cin不仅遇到EOF会返回无效状态(通常用来终止循环),遇到无效输入的时候也会返回无效状态,比如向整型变量输入字符. char类型的大小和机器有关,最小8位,大多数机器字节(byte)是8位,byte ...
- 记录--alova组件使用方法(区别axios)
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在我们写项目代码时,应该更加专注于业务逻辑的实现,而把定式代码交给js库或工程化自动处理,而我想说的是,请求逻辑其实也是可以继续简化的. ...