|
目录
引言
HTML?
概述
入门
标签学习
文件标签
文本标签
图片标签
列表标签
链接标签
块标签
语义化标签
表格标签
表单标签
表单项标签
CSS
概念
CSS与html结合方式
内联样式
内部样式
外部样式
css语法
基础选择器
扩展选择器
属性
引言
在进行JavaWeb阶段的学习前，我们首先得了解是它干什么的；JavaWeb，使用Java语言开发基于互联网的项目。web前端，主要是给网站做静态页面的，也就是说你平时浏览的网站所看到的页面基本都出自web前端，不过网站版面可以是美工出图。今天，我们来学习关于HTML&CSS的内容。
我们首先来了解web的软件架构：
- C/S: Client/Server 客户端/服务器端（在用户本地有一个客户端程序，在远程有一个服务器端程序）【优点】用户体验好【缺点】开发、安装、部署、维护 麻烦
- B/S: Browser/Server 浏览器/服务器端（只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序）【优点】开发、安装、部署、维护 简单 【缺点】1. 如果应用过大，用户的体验可能会受到影响 2.对硬件要求过高
B/S架构详解：
【静态资源】
特点：
1.使用静态网页开发技术发布的资源、2.所有用户访问，得到的结果是一样的、3.如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
HTML：用于搭建基础网页，展示页面的内容
CSS：用于美化页面，布局页面
JavaScript：控制页面的元素，让页面有一些动态的效果
【动态资源】特点：
1.使用动态网页及时发布的资源、2.所有用户访问，得到的结果可能不一样、3.如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器 （我们要学习动态资源，必须先学习静态资源）
HTML?
概述
html是最基础的网页开发语言-->Hyper Text Markup Language 超文本标记语言-->超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本-->标记语言：由标签构成的语言。<标签名称> 如 html，xml ?? ?标记语言不是编程语言。
入门
【语法】
html文档后缀名 .html 或者 .htm
【标签】
围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>
嵌套标签：需要正确嵌套，不能你中有我，我中有你（eg：<a><b></b></a>）
【注意】
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)
html的标签不区分大小写，但是建议使用小写
标签学习
文件标签
构成html最基本的标签；1.html:html文档的根标签、2.head：头标签。用于指定html文档的一些属性。引入外部的资源、3.title：标题标签、4.body：体标签、5.<!DOCTYPE html>：html5中定义该文档是html文档。
文本标签
和文本有关的标签；1.?<h1> to <h6>：标题标签（h1~h6:字体大小逐渐递减）、2.<p>：段落标签、3.<br>：换行标签、4.<hr>：展示一条水平线（color：颜色、width：宽度、size：高度、align：对其方式、center：居中）
<!--hr 显示一条水平线-->
<hr color="green" width="200" size="10" align="left"/>
<hr>
5.<b>：字体加粗、6.<i>：字体斜体、7.<font>:字体标签（color：颜色、size：大小、face：字体）、8.<center>:文本居中
<!-- 字体标签 font-->
<font color="red" size="5" face="楷体">春蚕到死丝方尽，蜡炬成灰泪始干。</font>
<br>
<font color="#F00FFF" size="5" face="楷体">春蚕到死丝方尽，蜡炬成灰泪始干。</font>
图片标签
img：展示图片；?属性：src：指定图片的位置； 相对路径：以.开头的路径（./：代表当前目录、../:代表上一级目录）
<!--展示一张图片 img/-->
<img src="../image/jingxuan_2.jpg"/>
<img src="../image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
列表标签
有序列表：ol ?li
<!-- 有序列表 ol-->
早上起床干的事情：
<ol type="A" START="5">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
无序列表：ul ?li
<!-- 无序列表 ul-->
早上起床干的事情：
<ul type="disc">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
链接标签
a:定义一个超链接；href：指定访问资源的URL(统一资源定位符)??target：指定打开资源的方式（_self:默认值，在当前页面打开、_blank：在空白页面打开）
<!--超链接 a-->
<a href="http://www.itcast.cn">点我</a>
<br>
<a href="http://www.itcast.cn" target="_self">点我</a>
<br>
<a href="http://www.itcast.cn" target="_blank">点我</a>
<br>
<a href="./05_列表标签.html">列表标签</a>
<br>
<a href="mailto:itcast@itcast.cn">联系我们</a>
<br>
<a href="http://www.itcast.cn"><img src="../image/jiangwai_1.jpg"></a>
块标签
div和span；div:每一个div占满一整行，块级标签（自动换行）??span：文本信息在一行展示，行内标签 内联标签（不会自动换行）
<!--
div：每一个div占满一整行，块级标签
span：文本信息在一行展示，行内标签 内联标签
-->
<span>黑马程序员</span>
<span>传智播客</span>
<hr>
<div>黑马程序员</div>
<div>传智播客</div>
语义化标签
html5中为了提高程序的可读性，提供了一些标签（<header>：页眉、<footer>：页脚）
表格标签
1.table：定义表格（width：宽度、border：边框、cellpadding：定义内容和单元格的距离、cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、bgcolor：背景色、align：对齐方式）
2.tr：定义行（bgcolor：背景色、align：对齐方式）? 3.td：定义单元格（colspan：合并列、rowspan：合并行）? 4.th：定义表头单元格? 5.<caption>：表格标题? ?6.<thead>：表示表格的头部分? ?7.<tbody>：表示表格的体部分? ?8.<tfoot>：表示表格的脚部分
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="gray" align="center">
<thead>
<caption>学生信息表</caption>
<tr>
<!--<td>编号</td>-->
<!--<td>姓名</td>-->
<!--<td>成绩</td>-->
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr bgcolor="aqua" align="center">
<td>1</td>
<td>帅比华</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>巴菌儿</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td>乔巴儿</td>
<td>100</td>
</tr>
</tfoot>
</table>
<hr>
表单标签
用于采集用户输入的数据的。用于和服务器进行交互；
form?用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。? 属性（action：指定提交数据的UR、method:指定提交方式（一共7种，2种比较常用））
get：1. 请求参数会在地址栏中显示。会封装到请求行中??2. 请求参数大小是有限制的??3. 不太安全
post：1. 请求参数不会再地址栏中显示。会封装在请求体中??2. 请求参数的大小没有限制??3. 较为安全
<form action="#" method="post">
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
表单项标签
input：可以通过type属性值，改变元素展示的样式；
type属性：1.text：文本输入框，默认值? 2.password：密码输入框? 3.placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息? 4.radio:单选框（1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样、2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值、3. checked属性，可以指定默认值）? 5.checkbox：复选框（1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值、2. checked属性，可以指定默认值）
<form action="#" method="get">
<label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
<label for="password">密码：</label><input type="password" name="password" placeholder="请输入密码" id="password"><br>
性别：<input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女
<br>
爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> java
<input type="checkbox" name="hobby" value="game"> 游戏
<br>
<input type="submit" value="登录">
6.file：文件选择框? 7.hidden：隐藏域，用于提交一些信息? 8.?按钮：（submit：提交按钮。可以提交表单、button：普通按钮、image：图片提交按钮）? 9.label：指定输入项的文字描述信息（注：abel的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点）
图片：<input type="file" name="file">
隐藏域：<input type="hidden" name="id" value="aa">
<br>
取色器：<input type="color" name="color">
<br>
生日：<input type="date" name="birthday">
<br>
生日：<input type="datetime-local" name="birthday">
<br>
邮箱：<input type="email" name="email">
<br>
年龄：<input type="number" name="age">
<br>
<input type="submit" value="登录">
<input type="button" value="一个按钮"><br>
<input type="image" src="../img/regbtn.jpg">
10.select: 下拉列表（子元素：option，指定列表项、textarea：文本域（cols：指定列数，每一行有多少个字符、rows：默认多少行））
省份：<select name="province">
<option value="">--请选择--</option>
<option value="1" selected>北京</option>
<option value="2">上海</option>
<option value="3">香港</option>
</select>
<br>
自我描述：<textarea cols="20" rows="5" name="des"></textarea>
CSS
概念
css（页面美化和布局控制），Cascading Style Sheets 层叠样式表（层叠：多个样式可以作用在同一个html的元素上，同时生效）? 。
好处（1. 功能强大、2. 将内容展示和样式控制分离）-->降低耦合度。解耦、让分工协作更容易、??提高开发效率。
CSS与html结合方式
内联样式
在标签内使用style属性指定css代码（eg：<div style="color:red;">hello css</div>）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--内联样式 (不推荐)
在标签内使用style属性指定css代码-->
<div style="color: yellow;">hello css</div>
</body>
</html>
内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<!--内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码-->
<div>hello css</div>
</body>
</html>
外部样式
1. 定义css资源文件??2. 在head标签内，定义link标签，引入外部的资源文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--可以不通过link标签的引用-->
<!--<link rel="stylesheet" href="../css/a.css">-->
<style>
@import "../css/a.css";
</style>
</head>
<body>
<!--外部样式
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
-->
<div>hello css</div>
<div>hello css</div>
<p>呀呼</p>
</body>
</html>
注：1,2,3种方式 css作用范围越来越大??1方式不常用，后期常用2,3。
css语法
格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素（注：每一对属性需要使用；隔开，最后一对属性可以不加；）
基础选择器
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
2. 元素选择器：选择具有相同标签名称的元素（语法： 标签名称{}? （注意：id选择器优先级高于元素选择器））
3. 类选择器：选择具有相同的class属性值的元素（语法：.class属性值{}?（注意：类选择器选择器优先级高于元素选择器））
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#div1{
color: red;
}
div{
color: green;
}
.cls1{
color: blue;
}
</style>
</head>
<body>
<!-- 1.id选择器：选择具体的id属性值的元素,建议在一个html页面中id值唯一
语法：#id属性值{} -->
<div id="div1">传智播客</div>
<div>黑马程序员</div>
<!--2. 元素选择器：选择具有相同标签名称的元素
语法： 标签名称{}
注意：id选择器优先级高于元素选择器-->
<!--3. 类选择器：选择具有相同的class属性值的元素。
语法：.class属性值{}
注意：类选择器选择器优先级高于元素选择器-->
<p class="cls1">传智学院</p>
</body>
扩展选择器
1. 选择所有元素：（语法： *{}）
2. 并集选择器：（选择器1,选择器2{}）
3. 子选择器：筛选选择器1元素下的选择器2元素（语法： ?选择器1 选择器2{}）
4. 父选择器：筛选选择器2的父元素选择器1（语法： ?选择器1 > 选择器2{}）
5.属性选择器：选择元素名称，属性名=属性值的元素（语法： ?元素名称[属性名="属性值"]{}）
6. 伪类选择器：选择一些元素具有的状态（语法： 元素:状态{}）?link：初始化的状态、visited：被访问过的状态、active：正在访问状态、hover：鼠标悬浮状态
属性
1. 字体、文本（font-size：字体大小、color：文本颜色、text-align：对其方式、line-height：行高）
2. 背景（background）? 3. 边框（border：设置边框，符合属性）??4. 尺寸（width：宽度、height：高度）
5. 盒子模型：控制布局? （margin：外边距、padding：内边距（默认情况下内边距会影响整个盒子的大小、box-sizing: border-box; ?设置盒子的属性，让width和height就是最终盒子的大小）?float：浮动?（left、right））
|