html 07.29
前段学习
1.html:页面架构
2.css:页面布局
3.JavaScript:页面交互
4.jquery:js的工具包
5.bootstrap:快速页面搭建的框架
HTML
1、html:超文本标记语言
超文本:文本、图片、音频、视频、超链接
标记:符号 - 标签 - 莫有逻辑
2、组成:转义字符、指令、标签
3、目的:完成页面框架的搭建
<!--doctype 必须出现在页面的最上方,规定该文档采用的HTML类型-->
<! doctype html>
<!--HTML语言不区分大小写-->
<!--页面标签:包含所有页面内容,只有head和body两个子标签-->
<html>
<!--头标签:样式、脚本、后勤操作:页面编码、页面标签|标题|图案-->
<head>
<title>第一个页面</title>
<meta charset="utf-8">
<style></style>
<script></script>
</head>
<!--体标签:页面显示内容存放区域、样式、脚本-->
<body>
你好, hello HTML!
<style></style>
<script></script>
</body>
</html>
指令
"""
指令:被<>包裹,以!开头 -
注释:<!-- -->
文档类型:<!doctype HTML>
"""
转义字符
"""
转义字符:被& ; 包裹,内容为特殊的字母或数字组成
<: <
>: >
空格:
版权: ©
"""
标签
"""
标签:被<>包裹,以字母开头,可以包含数字或减号 -
系统标签:h1~h6 p span div i b a img hr br table form
input
自定义标签:满足合法命名的所有标签
注释:HTML语言中,系统建议只使用系统标签,不建议使用自定义标签
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签基础</title>
</head>
<body>
<!--1.标题:加粗-->
<!--重点:h1标签的语义:是该页面的主标题-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
正文文本 <br>
正文文本
<!--2.段落:自带换行,有段落间距-->
<p>段落</p>
<p>段落1</p>
<!--3.换行标签-->
正文文本 <br>
正文文本 <br>
<!--自带换行的文本标签:h1~h6 p br-->
<!--4.文本类型标签:不自带换行的文本标签 -span i b-->
<p></p>
<span>span</span>
<span>span1</span>
<p></p>
<b>加粗标签</b>
<b>加粗标签</b>
<p></p>
<strong>以加粗作为强调的强调标签</strong>
<strong>以加粗作为强调的强调标签</strong>
<p></p>
<i>斜体标签</i>
<i>斜体标签</i>
<p></p>
<em>以斜体作为强调的强调标签</em>
<em>以斜体作为强调的强调标签</em>
<p></p>
<span>一般用来嵌套其它文本标签 上<sup>角标</sup> 下<sub>角标</sub>角标 </span>
<br>
<!--5.超链接标签-->
<a href="https://www.baidu.com" target="_blank">前往百度</a>
<br>
<!--6.图片标签-->
<!--title 鼠标悬浮的文本提示-->
<!--alt: img标签资源加载失败-->
<img src="图片路径" alt="">
<br>
<!--7.列表标签:无序ur>li 有序ol>li-->
<!--ul>li{第$列}*5-->
<ur>
<li>第01列</li>
<li>第02列</li>
<li>第03列</li>
<li>第04列</li>
<li>第05列</li>
</ur>
<br>
<ol>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
</ol>
<br>
<!--8.表格标签table>tr>th|td-->
<!--tr:行 th:标题单元格 td:普通单元格-->
<!--border:边框-->
<!--cellspacing:单元格的间距,最小为0,
但是在单元格之间是两条线,可以用rules="all"处理成一条线-->
<!--cellpadding:单元格的内边距(文本与标签的间距)-->
<table border="1" width="300" height="30" rules="all" cellspacing="0" cellpadding="10">
<caption>表格标题</caption>
<thead>
<tr>
<!--th{标题}*3-->
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<!--(tr>td{单元格}*3)*2-->
<!--rowspan: 合并行-->
<!--colspan: 合并列-->
<td >单元格</td>
<td rowspan="2">单元格</td>
<td colspan="2">单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--1.form的作用:完成前后台数据的交互,将用户录入的数据提交给后台|上传文件-->
<form action="">
<p>
<!--label作为input的文本解释标签,for绑定id-->
<!--values属性是表单标签的内容,就是提交给后台的-->
<!--name是提交给后台的key,value是值-->
<!--placeholder是文本占位符-->
<!--type是决定标签的类型本质(input|button)-->
<!--multiple,checked布尔类型属性,不需要写值,
multiple 多选 checked 默认激活-->
<label for="username">账号</label>
<input id="username" type="text" value="Owen" name="usr">
</p>
<p>
<label for="password">密码</label>
<input id="password" type="password" placeholder="请输入密码",name="pwd">
</p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<input type="file" name="male" name="sex" multiple>
</p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex" >
<p>
男<input type="CheckBox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
</p>
<p>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="登录">
</p>
</form>
</body>
</html>
标签的分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的分类</title>
</head>
<body>
<h1>标签的分类</h1>
<hr>
<!--1.是否自带换行-->
<!--带换行: h1 p div table form tr ul li-->
<!--不带换行: span i b a img input button label textarea-->
<!--2.单双标签-->
<!--单标签(主功能): br hr input img link-->
<!--双标签(主内容): html head body h1 p span div a label button-->
<!--/ 代表标签的结尾,但是单标签可以省略-->
<div></div>
<hr>
<!--3.简单和组合标签-->
<!--组合:ul>li table>tr>td|th form>input-->
</body>
</html>
CSS
"""
1.css:级联样式表(Cascading Style Sheet)
2.css属于标记语言,莫有逻辑
3.css是完成页面 样式(长什么样)与布局(标签位置)
4.学习的内容:
css如何控制HTML标签-建立联系-css选择器
css可以控制那些样式与布局
css如何导入到HTML文件中
5,目的:
完成页面的样式
"""
css三种引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入</title>
<!--2、内联式-->
<!--书写位置:在head标签中的style标签内-->
<!--css语法:css选择器{样式1;样式2;}-->
<!--优缺点:可读性强,有复用性.样式被HTML样式绑定了,不能提供给其它HTML页面使用-->
<style>
h2{
color:red;
font-size: 100px;
text-align: center;
}
</style>
<!--3.外联式-->
<!--书写位置:在外部css文件中,用HTML文件中通过link标签引入css文件-->
<!--css语法:css选择器{样式1;样式2;}-->
<!--优缺点:可读性强,有复用性,适合团队开发(文件级别的复用性)-->
<link rel="stylesheet" href="06.css">
</head>
<body>
<!--1.行间式-->
<!--书写位置:在标签的style属性中书写样式-->
<!--优缺点:可读性强,莫有复用性,书写直接-->
<h1 style="color: red;font-size: 100px;text-align: center" >css的引入</h1>
<h1>h1标签</h1>
<br>
<h2>h2标签</h2>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4>h4标签</h4>
</body>
</html>
/* css/06.css */
h3{
color: green;
font-size: 100px;
text-align: center;
}
h4 {
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*优先级：可以从作用范围来判断 - 作用范围越精确，优先级越高 */
/*1、统配选择器*/
*{
color:pink;
font-size: 12px;
}
/*2、标签选择器*/
h1{
font-size: 20px;
}
/**{*/
/*color:pink;*/
/*font-size: 12px;*/
/*}*/
/*3.类选择器*/
.h{
font-size: 30px!important;
}
.h2{
font-size: 40px;
}
.h.h2{
font-size: 50px;
}
/*4.id选择器*/
#hhh{
font-size: 100px;
}
/*优先级: !import >行间式>id>class>标签>统配*/
</style>
</head>
<body>
<h1 class="h">标题1</h1>
<h2 id="hhh" class="h.h2" style="font-size: 12px">标题2</h2>
</body>
</html>
浙公网安备 33010602011771号