一、什么是HTML
HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
二、HTML的一些标签
<strong>加粗</strong>
<em>斜体</em>
<br>换行符
<div>分块</div>
<a>a标签</a> //4个作用：超链接、锚点、打电话、协议限定符
<form>表单标签</form>
<p>p标签</p> //段落标签，用来换行
三、HTML的基本框架
<html lang="en">
<head><meta charset="utf-8"> //相当于加载文字库，这样你的网页才能显示出中文<title>网页名-显示在导航栏</title><meta content="游戏" name="keywords"> //网页搜索的关键字<meta content="这是一个你点开就上瘾的游戏" name="description"> //网页的描述
</head>
<body></body>
</html>
四、一些具体的实例
1.$50
<del style="color:#999">$50</del>
//显示效果如上，#999代表灰色，del代表加横线删掉
2.建立区域块
<div style="width:100px;height:100px;background-color:red;"></div> //表示建立一个宽高为100像素点、背景为红色的区域块
3.在选项前用数字排序，ol符并不常用
<ol type="1" reversed="reversed"> //type表示从1开始<li>橘子</li><li>苹果</li><li>草莓</li>
</ol>
4.在选项前加小圆圈
<ul type="circle"><li>橘子</li><li>苹果</li><li>草莓</li>
</ul>
5.在网页中插入图片
三种形式：a.可用网上的url；b.可用本地的绝对路径；c.可用本地的相对路径；
<img src=";quality=80&size=b9999_10000&sec=1583136752198&di=b54c0b972cf604e51b4945882a13d9c2&imgtype=0&src=http%3A%press%2F20170703%2Fed142a0bc5a877be4bf2e99ee0b3ee07.jpg" style="width:50px;" alt="这是颖宝" title="this is yin bao">
//alt（图片占位符）防止图片加载不出；title（图片提示符）在光标移至图片区域时显示。
6.a标签的4个作用
a.超链接；b.锚点；c.打电话；d.协议限定符
www.4399
你点我试试呀！come on!
锚点和协议限定忘记了。。。
<a href="" target="_blank">www.4399</a>
<a href="javascript:while(1){alter(‘让你手欠’)}">你点我试试呀！come on!</a>
7.表单标签form
username:
password:
<form method="get" action=""> //action是数据接收的地址<p> username:<input type="text" name="username"></p> <p>password:<input type="password" name="password"> </p><input type="submit" name="123" value="登录">
</form>
8.单选题
你们所喜欢的男星：<form method="get" action=""> //form是表单标签你们所喜欢的男星：1、贝克汉姆<input type="radio" name="star"> //radio表示单选题，star是问题变量，用来存储答案2、布莱恩特<input type="radio" name="star">3、姬成<input type="radio" name="star" checked="checked"> //表示选中默认状态<input type="submit">
</form>
9.登录设置
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'}">
//实现鼠标移到输入框上，框中提示文字消失
10.多选题
<form method="get" action=""> //form是表单标签 选择你喜欢的水果：1、苹果<input type="checkbox" name="fruit" value="apple"> //checkbox表示多选题2、栗子<input type="checkbox" name="fruit" value="orange">3、草莓<input type="checkbox" name="fruit" value="strawberry"><input type="submit">
</form>
11.下拉列表
<h1>Province</h1><select name="province"><option value="beijing">beijing</option><option value="beijing">shanghai</option><option value="beijing">tianjin</option></select>
五、引入CSS
1.行间样式
<body><div style="
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;"></div></body> //在html界面写
2.页面级CSS
//CSS代码
div {width: 100px;height: 100px;border-radius: 50%;background-color: red; //对html里的所有div进行作用
}
3.导入外部CSS文件
<link rel="stylesheet" type="text/css" href="CSS.css">
4.CSS选择器
4.1 id的用法（只能一对一）
4.2 class的用法（可以一对多，也可以多对一）
<html lang="en">
<head><meta charset="utf-8"><title>Document</title><style type="text/css"></style><link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body><div id="only">haskdn</div><div class="demo">2141453</div><div class="demo demo1">1235425</div>
</body>
</html>
//CSS代码
#only{background-color: red;
}
.demo {background-color: yellow;
}
.demo1 {color:#f40;
}
4.3 标签选择器
4.4 通配符
* {background-color: green;
}
4.5 属性选择器
[class] {background-color: green;
}
4.6 优先顺序关系（也叫CSS权重）：！important > 行间样式 > id > class | 属性选择器 > 标签选择器 > 通配符
4.7 选择器部分
<body><div><span>123</span></div><span>234</span><div class="wrapper"><strong class="box"><em>234</em></strong></div><em>123</em><div><em>1</em><strong><em>2</em></strong></div><div>1</div><div class="demo">2</div><p class="demo">3</p><em>1</em><strong>2</strong><span>3</span>
</body>
</html>CSS代码：
div span{ //父子选择器，又叫派生选择器；中间隔一个空格；back-ground-color: red;
}.wrapper .box em{ //直接子元素选择器；background-color: red;
}div>em{ //直接子元素选择器background-color: green;
}div.demo{ //并列选择器；不加空格，精准选择background-color: blue;font-size: 12px; //字体大小 浏览器默认为16；
}em,strong,span{ //分组选择器background-color: red；
}六、模型
1、设置颜色的三种方式
1.1 土鳖式（纯英文单词） color: green;
1.2 颜色代码 color：#ff4400；
1.3 颜色函数 color：rgb(0，255，255)；
2、字体样式设置
div {font-size: 30px; //字体大小font-weight: bold; //加粗font-style: normal; //样式font-family: cursive; //字体设置：草书border: 1px solid black; //复合属性：粗细 样式 颜色；（边框）color: rgb(0,255,255); //文本颜色width: 50px; //文本框宽度height: 50px; //文本框高度border: 100px solid black; //边界border-left-color: transparent; //左：透明；border-top-color: transparent; //上：透明；
}
运行结果如下：
七、伪类选择器
以下代码实现鼠标移动到网址上，网址背景色及边框发生变化
<a href="www.baidu">www.baidu</a>
a:hover{background-color: orange;color: #fff;font-family: arial;border-radius: 10px;
}
八、盒模型
1、元素简介
1.1 行级元素
feature：内容决定元素所占位置，不可以通过CSS改变宽高
example：span strong em a del
1.2 块级元素
feature：独占一行，可以通过CSS来改变宽高
example：div p ul li ol form address
1.3 行级块元素 inline-block
feature：内容决定大小，可以改变宽高
example:插入图片
2、盒子三大部分
盒子壁、内边距、盒子内容
3、
本文发布于:2024-02-02 12:26:21，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170684798243789.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
