<!-- html5 -->
<!DOCTYPE html><!-- 去掉变成HTML -->
<!-- 网页的根标签 -->
<html lang="en">
<!-- 头部标签 -->
<head>
<!-- 配置网页信息 -->
<meta charset="UTF-8">
<!-- 配置协议 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>Document</title>
</head>
<!-- body控制页面内容区 -->
<body>
<!-- 每个标签在浏览器渲染的时候都会被浏览器赋予特性 -->
<!-- h1 - h6都是标题标签（区别是h1最大 -->
<h1>hello world</h1>
<!-- 段落标签（用来展示一段文字内容） -->
<p>我的第一个网页，三周之后我就可以完成第一个小程序了。</p>
<p>嘎嘎嘎嘎个</p>
<!-- 直接写标签名字 src:图片的来源 source
alt: 当src是小的时候 加载alt alter:提示-->
<img src="海贼王.jpg" alt="图片未连接">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F228841cf026b2a4af2624ac362733a8f86c63ccb.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612333&t=cb5b26b6676574a2023c81ecca742f2e" alt="俺老孙去西天取经了">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180119%2Fbc406eb87edf4e62b615a352ce8b9701.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612457&t=8ffa4985f27799329cf46c8ed85982d8" alt="ONE piece">
<img src="貂蝉.jpg" alt="貂蝉掉线了"><!-- 图片网上下载-->
<!-- 超链接标签 href:让a标签跳转的位置 -->
<a href="http://www.taobao.com">淘宝网</a>
<!-- hr 修饰线段 -->
<a href="http://www.zhihu.com">知乎</a>
<a href="http://www.JD.com">京东</a>
<a href="http://www.acwing.com">AcWing</a>
<hr>
<!-- u1: 无序列表 unorder list -->
<ul>
<!-- 列表项 -->
<li>html标签</li>
<li>css样式</li>
<li>javascript</li>
</ul>
<ol>
<!-- 列表项 -->
<li>html标签</li>
<li>css样式</li>
<li>javascript</li>
</ol>
<p style="color: darkgoldenrod;">111111！</p>
<h1 style="color: darkred;">22222</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本样式</title>
<!-- style标签用来设置元素的层叠样式表 -->
<style>
/* 标签名{} >>> 为对应的标签来设置样式 */
span{
/* 样式名：样式值 */
color: gold;
font-size: 25px;
font-family: "仿宋";
/* 字体粗细 */
font-weight: bold;
/* 首行缩进两字符 1em = 16px */
text: indent 2em;
/* 背景颜色 */
background-color: hotpink;
}
</style>
</head>
<body>
<!-- 标签内style属性（行内样式） C
color(样式名)：darlcyan（样式值）-->
<span style="color: darkcyan;">该标签只是显示内容,没有任何语义</span>
<!-- 换行标签 -->
<br>
<!-- font-size:字体大侠：px代表的是单位（像素） -->
<span style="font-size: 20px;">这个span的字体要比上面的字体大</span>
<br>
<span style="font-family: '仿宋';">这和span的文字类型与上面的两个文字类型不同</span>
<br>
<span style="color: darkturquoise;font-size: 30px; font-family:'正楷'; " >上述三个文本样式都可以再该标签中呈现</span>
<hr>
<hr>
<hr>
<span>这个span的内容将采用style标签内的样式</span>
<P>不变色</P>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-size: 25px;
font-weight: bold;
}
/* id值：id选择器的查找 */
#red{
color: red;
}
#blue{
color: blue;
}
#green{
color: green;
}
.test{
color: hotpink;
}
/* 常用的选择器：
标签名选择器：选择所有的标签
id选择器：选择对应id的元素，如果没有则不生成
class类名选择器：适合多个标签采用同一套样式的时候使用
*/
</style>
</head>
<body>
<!-- $读取 -->
<!-- id：标签的标识 -->
<!-- 同一个文档不能出现重复的 id -->
<span id="red">1</span>
<span id="blue">2</span>
<span id="green">3</span>
<hr>
<!-- 标签名字{内容 $代表要加载几个} -->
<p>第1个p标签</p>
<!-- class类型选择器：多个标签次要采用同一套样式 -->
<p class="test">第2个p标签</p>
<p class="test">第3个p标签</p>
<p class="test">第4个p标签</p>
<p>第5个p标签</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块标签块元素</title>
<style>
/* 样式选择器之间使用，分隔开 */
html, body{
height: 100%;
/* 浏览器默认带有8px的margin值 */
margin: 0;
}
#boxOne{
/* 可以使用百分比也可使用具体像素
块元素不设置宽度的话, */
width: 400px;
/*h200 + tab快速生成 */
height: 200px;
background-color: indianred;
/* 一个值：代表的是同时为四个方向来设置外间距
两个值：第一个只代表的是上下，第二个值代表左右
四个值：上，右，下，左
*/
/* margin的左右设置成auto */
margin: 50px auto;
/* 背景图片 url：图片的链接地址*/
background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg");
/* 设置背景的尺寸 */
background-size: 100% 100%;
/* 设置背景是否重复 默认是repeat */
background-repeat: no-repeat;
}
img{
width: 100%;
height: 200px;
}
#box{
width: 300px;
height:300px;
background-color: lightcoral;
/* 居中设置 */
margin: 50px auto;
/* 边框宽度 */
border-width: 10px;
/* 边框的样式 */
/* border-style:dotted; */
/* border-color: lightseagreen; */
border-left: greenyellow dotted 10px;
border-right: indigo double 10px;
border-top: lightseagreen groove 10px;
border-bottom: maroon inset 10px;
/* 复合属性 */
border: solid 10px red;
/* 设置边框圆角的值 可以设置百分比 也可以设置像素*/
border-radius: 20px ;
}
</style>
</head>
<body>
<!-- 块标签div: 收纳一定量的元素标签
块标签可以设置大小-->
<div id="boxOne">
<!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg" alt="连接错误"> -->
<a href="">这是图片介绍</a>
</div>
<!-- # + id名字 会自动生成对应的加id的div -->
<div id="box"></div>
</body>
</html>
待续…
Pgadmin4是用于管理PostgreSQL数据库的基于Web的开源管理工具。这是一个基于Pyth...
面试的时候，经常会被面试官问到数据库优化方面的知识点。今天来总结一下数据库...
本文实例讲述了jsp中select的onchange事件用法。分享给大家供大家参考，具体如下...
Visual Studio Code 1.26 已发布，一些主要的更新亮点包括： 1. Breadcrumbs（面...
textarea 标签 大小不可变 复制代码 代码如下: textarea style="resize:none;"/t...
前言 github做为一个庞大的开源宝库, 作为程序猿我相信你不会陌生的,里面有着众...
jQuery的出现，大大的提升了我们操作dom的效率，使得我们的开发更上一层楼，如jQ...
作为一门先进的编程语言，Swift 可以说吸收了众多其他先进语言的优点，但是有一...
什么是FormData？ FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对...
这里是WMP的版本ClassID，从WMP7后ID就成了clsid: 6BF52A52-394A-11D3-B153-00C0...
