HTML笔记第三篇
作者：互联网
3.1.1<label>标签
<label>标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将·焦点（光标）转到对应的表单元素上，用来增加用户体验。
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心：<label>标签的for属性应当与相关元素的id属性相同。
3.1.2<select>表单元素
<select>定义下拉列表
语法：
<select>
<option>选项1</option>
<option>选项1</option>
<option>选项1</option>
...
</select>
1.<select>中至少包含一对<option>
2.在<option>中定义selected="selected"时，当前项即为默认选中项。
<form>
所在地区：<select>
<option>河南</option>
<option>山东</option>
<option>深圳</option>
<option selected="selected">四川</option>
</select>
</form>3.1.3<textarea>表单元素
语法：<textarea rows="每行中的字符数" cols="显示的行数">
文本内容
</textarea>
<form>
今日行程：<textarea cols="10" rows="3">今天你都去了哪里：</textarea>
</form>做一个表格：
<!DOCTYPE html>
<html lang="zh-CH">
<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>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<br />
<table>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" id="nan" /><label for="nan">男</label>
<input type="radio" name="sex" id="nv" /><label for="nv">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td><select>
<option selected="selected">--请选择年份--</option>
<option>2001</option><option>2002</option><option>2003</option>
</select>
<select>
<option selected="selected">--请选择月份--</option>
<option>1</option><option>2</option><option>3</option>
</select>
<select>
<option selected="selected">--请选择日期--</option>
<option>1</option><option>2</option><option>3</option>
</select>
</td>
</tr>
<tr>
<td><label for="area">所在地区</label></td>
<td><input type="text" id="area" /></td>
</tr>
<tr>
<td>婚姻状况</td>
<td><input type="radio" name="section" value="未婚" id="weihun" /><label for="weihun">未婚</label>
<input type="radio" name="section" value="已婚" id="yihun" /><label for="yihun">已婚</label>
<input type="radio" name="section" value="离婚" id="lihun" /><label for="lihun">离婚</label>
</td>
</tr>
<tr>
<td><label for="dagree">学历</label></td>
<td><input type="text" id="dagree" /></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="type" value="妩媚的" id="charming" /><label for="charming">妩媚的</label>
<input type="checkbox" name="type" value="可爱的" id="lovely" /><label for="lovely">可爱的</label>
<input type="checkbox" name="type" value="小鲜肉" id="young" /><label for="young">小鲜肉</label>
<input type="checkbox" name="type" value="老腊肉" id="old" /><label for="old">老腊肉</label>
<input type="checkbox" name="type" value="都喜欢" id="alllike" /><label for="alllike">都喜欢</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea cols="20" rows="3">自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册" /></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" id="yes" /><label for="yes">我同意注册条款和会员加入标准</label></td>
</tr>
<tr>
<td></td>
<td><a href="#">我是会员，立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h4>最爱的水果</h4>
<ul>
<li>香蕉苹果梨</li>
<li>桃子李子杏</li>
<li>火龙果猕猴桃</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
3.1.4查阅文档
经常查阅文档是一个非常好的学习习惯。
推荐的网址：
百度：http://www.baidu.com
W3C: http://www.w3c.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
3.2CSS简介
3.2.1CSS-网页的美容师
CSS是层叠样式表（Cascading Style Sheets）的简称。
有时我们也会称之为CSS样式表或级联样式表。
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS让我们的网页更加丰富多彩，布局更加灵活自如。
<!DOCTYPE html>
<html lang="zh-CH">
<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>体验CSS语法规范</title>
<style>
/* 选择器{样式} */
/* 给谁改样式{改什么样式} */
h4{
color: blue;
/* 修改了文字大小为15像素 */
font-size: 15px;
}
</style>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
</body>
</html>3.2.2CSS基础选择器
CSS选择器的作用
就是选择标签用的。
标签选择器
语法：
标签名{
属性1：属性值1；
属性2：属性值2；
}
类选择器
语法 ：
.类名 {
属性1：属性值1；
...
}
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.colorly {
width: 100px;
height: 100px;
background-color: pink;
}
.colorly-1 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="colorly"></div>
<div class="colorly-1"></div>
<div class="colorly"></div>
</body>
</html>多类名使用方式：
<div class="red font20">胡桃</div>
（1）在标签class属性中写多个类名
（2）多个类名中间必须用空格分开
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.size {
font-size: 20px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<div class="red size">胡桃</div>
<div class="green">香蕉</div>
</body>
</html>id选择器
语法：
#id名 {
属性1：属性值1；
...
}
<!DOCTYPE html>
<html lang="zh-CN">
<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>
/* id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
#green {
color: green;
}
</style>
</head>
<body>
<div id="green">胡桃</div>
<div>香蕉</div>
</body>
</html>通配符选择器
语法：
* {
属性1：属性值1；
...
}
<!DOCTYPE html>
<html lang="zh-CN">
<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>
/* 这里把<div> <p> <ul>所有标签都选中 */
* {
color: green;
}
</style>
</head>
<body>
<div>胡桃</div>
<p>香蕉</p>
<ul>
<li>葡萄</li>
</ul>
</body>
</html>
字体
<!DOCTYPE html>
<html lang="zh-CN">
<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>
h2 {
/* 注意不要在400后加单位 */
font-weight: 400;
/* font-weight: normal; 效果一样*/
}
body {
font-size: 25px;
}
.bold {
font-weight: 700;
}
</style>
</head>
<body>
<h2>刻舟求剑</h2>
<p>楚人有涉江者，其剑自舟中坠于水。</p>
<p>遽契其舟，曰：“是吾剑之所从坠。”舟止，从其所契者入水求之。</p>
<p class="bold">舟已行矣，而剑不行，求剑若此，不亦惑乎</p>
</body>
</html>
字体复合属性
<!DOCTYPE html>
<html lang="zh-CN">
<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>
p {
/* font-size: 12px;
font-family: 'Microsoft yahei';
font-weight: 700;
font-style: italic; */
/* 复合属性：简写方式 节约代码 顺序不能颠倒 */
/* font:font-style font-weight font-size/line-height font-family; */
font:italic 700 12px 'Microsoft yahei';
}
</style>
</head>
<body>
<h2>刻舟求剑</h2>
<p>楚人有涉江者，其剑自舟中坠于水。</p>
<p>遽契其舟，曰：“是吾剑之所从坠。”舟止，从其所契者入水求之。</p>
<p class="bold">舟已行矣，而剑不行，求剑若此，不亦惑乎</p>
</body>
</html>文本
对齐文本text-align
文本缩进text-indent：2em；
行间距line-height
装饰文本text-decoration
3.3行内样式表
3.3.1内部样式表
理论上可以放置在html表任何部位
3.3.2行内样式表
在元素标签内部的style属性中设定CSS样式。
<div style="color: red;font-size: 12px;">青春不常在，抓紧谈恋爱</div>
3.3.3外部样式表
建立.css文件
<link rel="stylesheet" href="xxx.css">
综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="html.css">
</head>
<body>
<h1>北方高温明日达鼎盛，京津冀多地地温将超60℃</h1>
<div class="area gray">
2019-07-03 16:31:47 来源：<a href="#">中国天气网</a>
<input type="text" name="input" value="请输入查询条件" class="search" />
<button class="btn">搜索</button>
</div>
<hr><!-- 水平线 -->
<p>明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
<p class="area"><img src="images/hot.jpg" title="高温图" alt="高温图" /></p>
<h4>明日热度再升级！京津冀携手冲击38℃+</h4>
<p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<div class="gray">本文来源：中国天气网 责任编辑：刘京_NO5631</div>
</body>
</html>
标签：第三篇,标签,笔记,HTML,样式表,font,选择器,CSS,属性 来源： https://blog.csdn.net/xll2902526420/article/details/118858158