标签：控件 color 标签 选择器 html sm 讲解 hello css
网页，是网站中的一个页面，通常网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML 文件。
HTML 全称，Hyper Text Markup Language（超文本标记语言）。
<!DOCTYPE html>
<html> <!-- 根标签 -->
<head> <!-- 网页头标签 -->
<meta charset="utf-8"> <!-- 网页编码 -->
<title>标题</title>
</head>
<!--
text 设置网页正文中所有文字的颜色
bgcolor 设置网页的背景色
background 设置网页的背景图
-->
<body text="#0f0"> <!-- 网页正文 -->
hello sm<br>
hello sm<br>
hello sm<br>
hello sm<br>
<!-- 相比 br换行， p 标签段与段之间有空行 -->
<p>hello sm</p>
<p>hello sm</p>
<p>hello sm</p>
<p>hello sm</p>
<!--水平线标签 -->
<hr width="500px" color="blue" size="5" align="left" />
<!-- 行级块标签，独占一行，换行 -->
<div>hello sm</div>
<!-- 行内块标签，所有内容都在同一行 -->
hello sm <span style="color:red">hello sm</span> hello sm
<!-- 字体标签 -->
<font size="7" color="red" face="微软雅黑">字体标签</font>
<!-- 格式化标签 -->
<b>内容加粗</b>
<strong>强调加粗</strong><br />
<i>斜体</i> <em>强调的斜体</em><br />
<small>小号字体</small>
<big>大号字体</big>
<sub>下标字体</sub>
<sup>上标标字体</sup>
<del>删除线</del>
<!-- 内容标题 -->
<h1>超大标题</h1>
<h2>第二大标题</h2>
<h3>第三大标题</h3>
<h4>第四大标题</h4>
<h5>第五大标题</h5>
<h6>第六大标题</h6>
<!-- 无序列表 -->
<ul type="square">
<li>hello sm</li>
<li>hello sm</li>
<li>hello sm</li>
</ul>
<!-- 有序列表 -->
<ol type="1" start="6">
<li>hello sm</li>
<li>hello sm</li>
<li>hello sm</li>
</ol>
</body>
</html>
图形标签、链接标签用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接 -->
<a href="../img/004.png">跳转到内部页面</a>
<!-- 用法2：加target属性 _blank: 在新窗口跳转 默认 _self:在自身窗口跳转 -->
<a href="http://www.baidu.com" target="_self">跳转到百度</a><br />
<!-- 用法2 跳到 name="kk" 的 a标签 -->
<a href="#kk">跳到锚点</a>
<br>
哈哈哈
<!-- 图形标签 align：与图片对齐显示方式 alt：图片未加载时的提示-->
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center" alt="图片未加载时的提示">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
<a name="kk">
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
</a>
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
</body>
</html>
表格标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- table: 子标签：tr 行 th 列加粗 td 列无加粗
属性：border：边框 cellspacing:单元格间距 ：单元格与单元格间距
cellpadding:内间距：单元格域内容的间距
rowspan: 跨行
colspan: 跨列
-->
<table border="2" cellspacing="0" cellpadding="5px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>zs</td>
<td colspan="2">30</td>
<td rowspan="2">删除</td>
</tr>
<tr>
<td>ls</td>
<td>24</td>
<td>女</td>
</tr>
</table>
</body>
</html>
HTML表单标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 块级标签(元素)：带回车换行的标签：div、p、br、h1~h6...
行级标签(元素): 不带换行的标签：span、a、img、格式化标签、font...input
-->
<!-- 表单： form标签
action: submit 触发，可以是前端跳转路径，也可以是后台服务器路径
method:请求方式：get 和post
enctype:表示是表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
-->
<form action="index.html" >
文本输入框:<input type="text" /><br />
密码框:<input type="password" /><br />
单选框：<input type="radio" /><br />
复选框：<input type="checkbox" /><br />
邮箱控件：<input type="email" /><br />
数字控件：<input type="number" /><br />
日期控件：<input type="date" /><br />
日期和时间：<input type="datetime" /><br />
上传控件：<input type="file" /><br />
隐藏控件： <input type="hidden" /><br />
范围控件： <input type="range" /><br />
取色控件：<input type="color" /><br />
<input type="submit" value="提交按钮" /><br />
<input type="button" value="普通按钮" /><br />
<input type="reset" value="重置按钮" /><br />
<input type="image" src="../img/004.png" width="80px" height="40px" value="图片按钮" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>用户注册</h2>
<form>
用户名:<input type="text" /><br />
密码：<input type="password" /><br />
<!-- 两个单选控件需要在一个组里，才能进行单选，用name分组 -->
性别:<input type="radio" name="sex" />男<input type="radio" name="sex" />女<br />
爱好：<input type="checkbox" />吃 <input type="checkbox" />喝<input type="checkbox" />玩<br />
<!-- multiple="multiple": 显示多列的列表信息 -->
省份：<select>
<option>湖南</option>
<option>湖北</option>
<!--selected="selected":默认选择的属性 -->
<option selected="selected">广东</option>
<option>广西</option>
</select><br>
基本信息：<textarea rows="10" cols="30">我的介绍..</textarea><br />
<input type="submit" value="注册" />
</form>
</body>
</html>
frameset 框架标签。
例子，左边点击链接按钮，右边显示。
<!-- head.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="green">
</body>
</html>
<!-- left_action.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="orange">
<!-- 自定义 target， 链到 frame 标签的 name 属性上-->
<a href="https://www.baidu.com" target="content">百度</a><br>
<a href="https://www.sina.com.cn" target="content">新浪</a>
</body>
</html>
<!-- right_content.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="white">
</body>
</html>
<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- rows划分成行
cols划分列
注意： frameset与body不能共存
frame子标签：用于关联不同页面 src属性：用于指定页面路路径；noresize:固定大小
-->
<frameset rows="%20, *">
<frame src="head.html"></frame>
<frameset cols="15%, *">
<frame src="left_action.html"></frame>
<frame src="right_content.html" name="content"></frame>
</frameset>
</frameset>
</html>
CSS ，全称 Cascading Style Sheets 层叠样式表，定义如何显示HTML元素。修饰美化html网页。外部样式表可以提高代码复用性从而提高工作效率。html内容与样式表现分离，便于后期维护。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 优先级：内联 > (内部==外部,看顺序) -->
<!-- 3.外部样式 -->
<link rel="stylesheet" type="text/css" href="../css/red.css"/>
<!-- 2.内部样式 -->
<style>
h1{
color: green;
font-size: 100px;
font-family: "微软雅黑";
font-style: italic;
}
/* 4.导入样式，不常用 */
@import url("../css/red.css");
</style>
</head>
<body>
<!--1. 内联样式 -->
<h1 style="color: blue;">内容标题1</h1>
</body>
</html>
CSS 选择器。
基本选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 选择器的优先级： id>class>标签 */
/* 1.标签选择器 */
h1{
color: red;
}
/* 2.类选择器 */
.myClass{
color: green;
font-size: 100px;
}
/* 3.id选择器*/
#myId{
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h1 class="myClass" id="myId">内容标题</h1>
</body>
</html>
属性选择器。根据元素的属性及属性值来选择元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 选择器[属性=值][属性] */
h1[name="zs"][title]{
color: red;
}
</style>
</head>
<body>
<h1 name="zs" title="tt">标题1</h1>
<h1 name="zs">标题2</h1>
</body>
</html>
伪元素选择器。主要针对 a 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 静止状态 */
a:link{
color: red;
}
/*悬浮状态：鼠标放进来 */
a:hover{
color: green;
}
/*触发状态 */
a:active{
color: yellow;
}
/*完成状态 */
a:visited{
color: black;
}
</style>
</head>
<body>
<a href="#"><h1>伪元素选择器</h1></a>
</body>
</html>
层级选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 后代选择器：所有后代指定标签都起作用*/
ul a{
color: red;
}
/* 子代选择器：只儿子标签起作用 */
ul>a{
color: orange;
}
/* 相邻兄弟选择器 标签+标签{}: 相邻的兄弟起作用 */
/* 第二行 li 变蓝色 */
#aa+li{
color: blue;
}
/* 第二、三行 li 变蓝色 */
li+li{
color: blue;
}
</style>
</head>
<body>
<ul>
<li id="aa"><a>aaaaa</a></li>
<li><a>bbbbb</a></li>
<li><a>ccccc</a></li>
<a>ddddd</a>
</ul>
</body>
</html>
标签：控件,color,标签,选择器,html,sm,讲解,hello,css 来源： https://blog.csdn.net/liu1shi/article/details/111047366
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。