HTML&CSS笔记001
lesson1
<!DOCTYPE html>
<html lang="en,zh">
<!-- 告诉搜索引擎爬虫，我们的网站是关于什么内容的 -->
<head>
<meta charset="utf-8">
<meta content="服装" name="keywords">
<meta content="好看的衣服" name="description">
<title></title>
</head>
<body>
①<p>我是你爸爸</p>
<p>我是你爸爸</p><!-- 段落标签 -->
②<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6><!-- 标题标签 独成一段，加粗字体-->
③<strong>
<em>哈哈</em>
</strong>
④<del style="color:#999">50$</del>
⑤<address>我的家在东北</address>
⑥<div style="color:#f40">
<strong>a</strong>
<em>b</em>
<del>c</del>
</div>
<span></span><!-- 可以作为容器能够捆绑操作 -->
</body>
</html>
lesson2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/*链接到4中的ul的导航栏应用*/
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
li{
margin: 0 10px;
float:left;
color:#f40;
font-weight: bold;
font-size: 24px;
height: 30px;
line-height: 30px;
padding: 0 5px;
}
li:hover{
border-radius:20px;
background-color:#f40;
color: #fff;
}
</style><!-- 链接到4中的ul的导航栏应用 -->
<style type="text/css">
input{
border: 1px solid #999;
}
</style>
</head>
<body>
<div style="width:100px;height:100px; ">
彪哥很帅
<!-- 1.1 ①空格和回车都是字符分割符 -->
osdfjsjfsjff fdfdfsf dff
<!-- 1.2 html编码 -->
<!--① 空格： -->
<!--②小于和大于符号< > -->
<!-- 彪哥 帅 <div> -->
<!-- 2.1 回车符 <br> -->
<!-- <br><br><br><br><br><br> -->
<!-- 2.2 水平线 <hr> -->
<!-- 3. 有序列表 -->
<!-- </div>
喜欢的电影
<ol type="i" start="117" reversed="reversed">
<li>了不起的盖茨比</li>
<li>飞速发</li>
<li>的说法</li>
<li>地方</li>
</ol> -->
<!-- 4.无序列表 应用：导航栏-->
<!-- <ul type="square">
<li>苹果</li>
<li>草莓</li>
<li>橘子</li>
<li>香蕉</li>
</ul> -->
<!-- 5.img src="" -->
<!-- 1.网上的url
2.本地的绝对路径
3.本地的相对路径
相对关系 D:/A/B/LESSON2.HTML
D:A/B/123.JPG-->
<!-- <img src="" alt="" title=""> -->
<!-- <alt>是图片占位符，当图片出错时显示文字信息
<title>是图片提示符-->
<!-- 6.<a herf=""></a> 超链接 -->
<!-- 6.11 文本超链接-->
<!-- <a href="https://www.baidu.com">百度一下，你就知道</a>
--> <!-- 6.12 图片超链接-->
<!-- <a href="https://www.baidu.com">
<img src="">
</a> -->
<!-- 6.13 超链接跳转至新的标签页-->
<!-- <a href="https://www.baidu.com" target="_blank">百度一下，你就知道
</a> -->
<!-- 6.2 锚点，回到顶部/底部 -->
<!-- <div id="demo1" style="width: 100px;height: 100px;">demo1
</div>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div id="demo2" style="width: 100px;height: 100px;">demo2
</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a> -->
<!--6.3 打电话 发邮件-->
<!-- <a href="tel:1566804****">给彪哥打电话</a>
<a href="mailto:299893****@qq.com">给彪哥发邮件</a> -->
<!-- 7.<form>表单向后台发送数据 method有两种方法:get/post
action是发送给谁 -->
<form method="get" action="">
<p>
username<input type="text" name="username" value="请输入用户名">
<!-- 输入框
后面是数据名 数据值需要输入 -->
</p>
<p>
password<input type="password" name="password">
<!-- 密码框 -->
<!-- 后面是数据名 数据值需要输入-->
</p>
<input type="submit" value="登陆啦">
<!-- submit 提交按钮 -->
<!-- 喜欢的男明星
1.周杰伦<input type="radio" name="star" value="jaychou">
2.吴亦凡<input type="radio" name="star" value="wu">
3.彭于晏<input type="radio" name="star" value="peng">
<input type="submit"> -->
<!-- 单选框 name的作用是把它们限定在一个选择题中
value是数据值 没有value就不能提交-->
</form>
</body>
</html>
lesson3.html （与lesson3.css配套使用）
<!DOCTYPE html> <!-- <form>和<input>必须连用才能提交 -->
<html>
<head>
<title>
lesson3
</title>
<meta charset="utf-8">
<!-- 链接CSS1.2 页面级CSS -->
<!-- <style type="text/css">
div{
width:100px;
height:100px;
background-color: green;
}
</style> -->
<!-- 链接1.3 的link -->
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- 1.复选框 -->
<!-- <h1>
Choose your favorite fruit!!
</h1>
<form>
1.apple<input type="checkbox" name="fruit" value="apple">
2.orange<input type="checkbox" name="fruit" value="orange">
3.banana<input type="checkbox" name="fruit" value="banana"> -->
<!-- 2.单选框默认选中 -->
<!-- 请选择您的性别
<form>
male<input type="radio" name="sex" value="male" checked="checked">
female<input type="radio" name="sex" value="female">
<input type="submit">
</form> -->
<!-- 3.下拉菜单的构造 -->
<!-- <form method="get">
<h1>province</h1>
<select name="province">
<option>beijing</option>
<option>shandong</option>
<option>shanghai</option> -->
<!-- </select> --><!-- 提交的数据值即是option间的值 也可以在option间添加value再赋值 -->
<!-- <input type="submit"> -->
<!-- </form> -->
<!-- CSS -->
<!-- 1.CSS的引入 -->
<!-- 1.1行间样式引入 -->
<!-- <div style="
width: 100px;
height: 100px;
">
</div> -->
<!-- 1.2 页面级CSS见上head内 -->
<!-- <div></div> 下面这个div不可以省略 -->
<!-- 1.3 建立一个 lesson3.css的文件 之后再head中用link -->
<!-- PS:这里的<div></div>也不能省略 -->
<!-- 2.选择器 -->
<!-- 2.1 ID选择器 ID 一一对应 -->
<!-- <div id="only">123</div>
<div id="only1">456</div> -->
<!-- 2.2 class -->
<!-- <div class="demo demo1">123</div>
<div calss="demo">456</div> -->
<!-- 2.3标签选择器 -->
<!-- <div>123</div> -->
<!-- 2.4通配符选择器 -->
<!-- <span>123</span>
<div>456</div>
<strong>999</strong> -->
<!-- 2.5属性选择器 -->
<!-- <div id="only" class="demo">123</div>
<div id="only1">234</div> -->
<!-- !important -->
<!-- <div style="background-color: red">666</div> -->
<!-- 选择器的优先级：
!important>行间样式>id>class=属性选择器>标签选择器>通配符 -->
<!-- CSS权重 -->
!important Infinity正无穷
行间样式 1000
id 100
class|属性|唯类 10
标签|伪元素 1
通配符 0
256进制
</body>
</html>
lesson3.css
/*div{
width: 100px;
height: 100px;
border-radius:50%;
background-color: red;
}*/
/*2.1#only{
background-color: red;
}
#only1{
background-color: green;
}*/
/*2.2 class选择器
.demo{
background-color: yellow;
}
.demo1{
color: #f40;
}*/
/*2.3 标签选择器 选中所有该种标签（无论标签是否嵌套，无论标签的位置）*/
/*div{
background-color: red;
}*/
/*2.4通配符选择器 选中所有标签*/
/**{
background-color: green;
}*/
/*2.5属性选择器*/
/*[id="only"]{
background-color: green;
}*/
/*!important*/
/*div{
background-color: green!important;
}*/
HTML&CSS笔记001的更多相关文章
- gogs 源码阅读笔记 001
gogs 源码阅读笔记 001 gogs项目相当不错,本笔记实际是基于gogs fork版本 git-122a66f. gitea (gitea版本由来)[https://blog.gitea.io/ ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- [Oracle]OWI学习笔记--001
[Oracle]OWI学习笔记--001 在 OWI 的概念里面,最为重要的是 等待事件 和 等待时间. 等待事件发生时,需要通过 P1,P2,P3 查看具体的资源. 可以通过 v$session_w ...
- TensorFlow机器学习框架-学习笔记-001
# TensorFlow机器学习框架-学习笔记-001 ### 测试TensorFlow环境是否安装完成-----------------------------```import tensorflo ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- HTML+CSS笔记 CSS中级 一些小技巧
水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...
- HTML+CSS笔记 CSS中级 颜色&长度值
颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...
- HTML+CSS笔记 CSS中级 缩写入门
盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...
随机推荐
- vcfc之zk+postsql+keystore（cassandra）框架分析
vcfc框架总结: 1 一. bus和keystore是如何协调处理的,什么样的问题是处理不了的? 1. 如果在备重启的过程中,主处理了某个时间1,备机如果同步数据呢? 二 .数据可靠性和一致性分析 ...
- 第5章 css与背景相关的样式background
background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参 ...
- 三种角度解释href/src/link/import区别
网上查到的几种不同但比较容易理解的解释 解释一: href是Hypertext Reference的缩写,表示超文本引用.用来建立当前元素和文档之间的链接.常用的有:link.a.例如: <li ...
- IO流之打印流
打印流的概述(只有输出就是只与数据目的有关,不会抛出IO异常) 打印流添加输出数据的功能,使它们能够方便地打印各种数据值表示形式. 打印流根据流的分类: l 字节打印流 PrintStream l ...
- ActiveX界面已显示,调用方法报undefined的处理办法
1.在ie中将当前网址加入信任网站 2.设置->internet选项->安全->受信任站点->自定义级别:将所有有关ActiveX的选项设置为启用 3.重启ie再次访问即可. ...
- css3 animation运用
animation:mymove 5s infinite; @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyfr ...
- 在URL里传入数组到HTML 里。
需求 静态页面根据URL输入,动态显示图表满足如下两个条件. 1. 隐藏指定的行 2. 设定初始显示的Check box 需要的部分被打勾 实现 1. 创建一个静态的页面, <table id= ...
- Python 2 和Python 3的区别
print input urlopen print print在版本2的使用方法是: print 'this is version 2' 也可以是 print('this is version 2') ...
- 佛系结对编程---四则运算（Core 第四组）
----by core 第四组 ( 邹卫其 范力 ) 一. 项目介绍 1. 能自动生成小学四则运算题目并给出答案,生成题目时可以选择下列参数: 1)生成题目数量 2)每道题目中运算数数量 ...
- Incorrect string value: '\xE8\xAF\xAD\xE6\x96\x87' for column 'name' at row 1
报错的原因就是在执行插入时对Name这个字段被赋予了错误的字符串值:’\xE4\xB8\xAD\xE6\x96\x87’ 实际上就函数里面的变量接收到的值编码格式跟它定义的不一致. 使用navicat ...