HTML+CSS理论篇

阅读：评论：0

HTML+CSS理论篇

一、html 初级篇 - 基础标签

<html lang="en,zh">
<head><meata charset="utf-8"><title>淘宝网，淘，呸！</title><meta content="服装" name="keywords"><meta content="这是一个你穿了就不想脱的衣服" name="description">
</head><body><!--告诉搜索引擎爬虫，我们网站是关于什么内容的 --><p>this is paragraph!!!</p><p>this is paragraph!!!</p><p>this is paragraph!!!</p>www.xwlh${标题}*6<strong>加粗</strong><em>斜体</em><del style="color: #999">￥50</del><address>安徽省六安市霍邱县,web coffce</address><div>举个例子</div><div>举个例子</div><div>举个例子</div><div>举个例子</div><span>举个石头</span><span>举个石头</span><span>举个石头</span><span>举个石头</span><div style="color: #999 "><strong>加粗</strong><em>斜体</em></div>
</body>
</html>

运行效果

小结：

“SEO：搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益。SEO包含站外SEO和站内SEO两方面。”

gb2312中文简体gbk中文且有繁体unicode万国码utf-8万国码升级版

<div></div>,<span></span>容器功能，捆绑操作

二、html 进阶篇 - 高级标签

空格、回车在HTML中是文字分隔符

&nbsp 空格

&lt 小于 (less than)

&gt 大于（great than)

单标签<br> 换行

单标签<meta>

单标签<hr> 水平线

有序列表：type属性有：1，A，a，i，I

<ol type="a">
       <li>marvel</li>
       <li>速度8</li>
       <li>返老还童</li>
       <li>了不起的比尔盖茨</li>
</ol>

倒序

<ol type="a" reversed="reversed">
       <li>marvel</li>
       <li>速度8</li>
       <li>返老还童</li>
       <li>了不起的比尔盖茨</li>
   </ol>

<ol type="a" start="2">
       <li>marvel</li>
       <li>速度8</li>
       <li>返老还童</li>
       <li>了不起的比尔盖茨</li>
   </ol>

target在新标签打开

//Anchor 锚点

//1.超链接；2，锚点；3.打电话；4.协议限定符

form表单

<form method="get" action="">
       <p>
           username:<input type="text" name="username">
       </p>
       <p>password:<input type="password" name="password"></p>
       <input type="submit">
   </form>

发送数据需要有数据名name和数据值value

<input type="radio" name="star">；这里input type可以是radio单选或者checkbox复选，name:定义哪些是一个选择题选项

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>你们喜欢看的电影<ol type="a" start="2"><li>marvel</li><li>速度8</li><li>返老还童</li><li>了不起的比尔盖茨</li></ol><ul type="circle"><li>天猫</li><li>聚划算</li><li>天猫超市</li></ul><img src="" style="width: 200px;" alt="这是范爷" title="this is fanye"><!-- 1.网上url2.本地的绝对路径3.本地的相对路径--><!-- alt 图片占位符--><!--title 图片提示符 --><a href="">www.baidu </a><a href="" style="width:100px;height: 100px;display: block;background:red" target="_blank"> </a><!--target在新标签打开 -->//Anchor 锚点//1.超链接；2，锚点；3.打电话；4.协议限定符<div id="demo1" style="width:100px;height: 100px;background: : green">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><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;background: : red">demo2</div><a style="display:block;position:fixed;bottom: 100px;right: 100px;height:50px;border: 1px solidblack"href="#demo1">find demo1</a><a style="display:block;position:fixed;bottom: 200px;right: 100px;height:50px;border: 1px solidblack"href="#demo2">find demo2</a><a href="tel:13349003030">给龙哥打电话</a><a href="mailto:3190217171@qq">给龙哥发邮件</a><a href="javascript:while(1){alert('让你手欠')}">你点我试试呀！come on! 来呀！</a><form method="get" action=""><p>username:<input type="text" name="username"></p><p>password:<input type="password" name="password"></p><input type="submit"></form>选择你喜欢的女明星1.迪丽热巴<input type="radio" name="star" value="dilireba">2.古力娜扎<input type="radio" name="star" value="gulinazha">3.马尔扎哈<input type="radio" name="star" value="maerzhaha"><input type="submit"><p>username:<input type="text" name="username" style="color:#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';lor='#424242'}" onblur="if (this.value=='') {this.value='请输入用户名';lor='#999'}"></p></html>

checked,默认选中

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><form method="get" action=""><h1>Choose Your SEX!!!</h1>male:<input type="radio" name="sex" value="male" checked="checked">female:<input type="radio" name="sex" value="female"><br><input type="submit"></form>
</body>
</html>

多选

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><form method="get" action="">
<h1>choose your fruit!!!</h1>apple:<input type="checkbox" name="fruit" value="apple">orange:<input type="checkbox" name="fruit" value="orange">banana:<input type="checkbox" name="fruit" value="banana"><input type="submit"></form>
</body>
</html>

select表单

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><form method="get" action=""><h1>Province</h1><select name="Province"><option value="beijing">beijing</option><option value="shanghai">shanghai</option><option value="tianjin">tianjin</option></select><br><input type="submit"></form>
</body>
</html>

市面上主流浏览器的内核有哪些？

HTML 结构

CSS 样式

JavaScript 行为

终于HTML主要标签告一段落了！

三、css初级篇-css引入css基础选择器权重

cascading style sheet 层叠样式表

1引入CSS

1.1、行间样式

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
<!-- 引入CSS1.行间样式 --><div style="width: 100px;height: 100px;background-color: red;"></div>
</body>
</html>

1.2、页面级CSS

<!DOCTYPE html>
<html>
<head><title>Document</title><style type="text/css">div{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body>
<!-- 	2.页面级CSS --><div></div>
</body>
</html>

1.3、外部CSS文件

<!DOCTYPE html>
<html>
<head><title>Document</title><link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- 	3.外部CSS文件 --><div></div>
</body>
</html>

新建lesson3.css

div{width: 100px;height: 100px;border-radius: 50%;background-color: black;
}

异步加载

2选择器

2.1 id

#only{background-color: red;}#only1{background-color: green;
}

<!DOCTYPE html>
<html>
<head><title>Document</title><link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body><form method="get" action="">
<!-- 1.选择器 -->
<div id="only">123</div>
<div id="only1">234</div>
</body>
</html>

2.2 class

<!DOCTYPE html>
<html>
<head><title>Document</title><link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body><form method="get" action="">
<!-- 2.class -->
<div class="demo">123</div>
</body>
</html>

#only{background-color: red;}#only1{background-color: green;
}.demo{background-color: yellow;
}

class 多对多

<!DOCTYPE html>
<html>
<head><title>Document</title><link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body><form method="get" action="">
<!-- 2.class -->
<div class="demo">123</div>
<div class="demo demo1">234</div>
</body>
</html>

#only{background-color: red;}#only1{background-color: green;
}.demo{background-color: yellow;
}
.demo1{color: #f40;
}

2.3标签选择器

<!DOCTYPE html>
<html>
<head><title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- 3.标签选择器 -->
<div>123</div>
<div>234</div></body>
</html>

div{background-color: black;
}

2.4通配符

<!DOCTYPE html>
<html>
<head><title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body><!-- 
4.通配符 -->
</body>
</html>