前端---->HTML篇-->HTML介绍、HTML常用标签(head常用标签、body常用标签1-7) 第四十四天 2018.12.07
数据---->处理数据、存储数据、使用数据
前端:
HTML 网页内容 (内容) 标签
CSS 改变网页外观内容样式 (外观) 选择器、属性
JavaScript 轮播图、点击交流框---->交互信息 (动作) 基础语法 BOM&DOM
HTML介绍:
HTML---->web开发
Web开发本质(面试题):
1. 浏览器输入网址回车都发生了什么?
1. 浏览器 给服务端 发送了一个消息
2. 服务端拿到消息
3. 服务端返回消息
4. 浏览器展示页面
客户端和服务端 消息的格式是约定好的
HTTP协议: 浏览器和服务器之间约定好的消息格式
HTML---->超文本标记语言，是一个标准,规定了大家怎么写网页---->HTML是一种标记语言，不是编程语言
HTML --> 学标签
<标签名> --> 标记语言 (HTML, XML)
标签分类:
双标签 <h1></h1>(标题) <a></a>(点击跳转)
单标签(自闭和标签) <img>(插入图片)
HTML文件的结构:
1. 文档声明
2. html标签
head标签
head内常用标签
body内常用标签
body标签(用户在浏览器能看到的内容)
HTML注释：<!-- -->一般推荐使用单行注释、多行注释直接按换行，会自动找到起始结束标签 注释pycharm中ctrl+/ tab键自动补全
HTML语句与SQL语句一样，与缩进无关
HTML语句的缩进只是为了增强代码可读性
任何标签都有3个属性
id 不能重复---->标识、字母和数字的组合 同一个网页上id值原则上不能重复
class 属性---->定义CSS样式
style ---->在这个位置定义一个属性
<!DOCTYPE html> # 声明这个文件为HTML5文件(HTML5版本)
<html> # 双标签
<head> # 写一些浏览器相关的信息，比如标题，引用的css文件、js文件是那些
</head> # 不会显示在浏览器的主页面上
<body> # 显示在浏览器的主页面上
<h1>hello s99!</h1>
<img src="http://image.tianjimedia.com/uploadImages/2012/355/X1OT3M49V0D4_1280x1024.jpg">
<a href="http://www.sogo.com">sogo</a>
</body>
</html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html> <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。 <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。 <title>、</title>定义了网页标题，在浏览器标题栏显示。 <body>、</body>之间的文本是可见的网页主体内容。
HTML内常用标签
head内常用标签:
<!DOCTYPE html>
<html lang="zh-CN"> # 表示这个网页主要的语言 主要是给浏览器识别所做的网页是英文还是中文 en为英文
<head>
<meta charset="UTF-8"> # 声明编码 网页有中文一定要加入、否则会出现乱码
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> # 关键字
<meta name="description" content="老男孩教育Python学院"> # 描述
# 关键字和描述用于搜索引擎机器人查找信息和分类信息用的。---->搜索关键字会跳转到网址
<meta http-equiv="refresh" content="2;URL=http://www.oldboyedu.com">
# 指定网站2秒钟后跳到对应网址 http-equiv="refresh" (刷新) content ="n(时间-->秒数);将要跳到的网址"
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
# IE浏览器慢，用最高级模式渲染文档稍微快些
<title>我的第一个HTML页面</title>
<!--<style>-->
<!--a {-->
<!--color: red;-->
<!--}-->
<!--</style>-->
<!--<link rel="stylesheet" href="test.css">--> # test.css文件内部为a{color:red;}
<!--<script>-->
<!--alert("hello s9!");-->
<!--</script>-->
</head>
<body>
<h1>hello s9!</h1> # 标题1-6 只有6个标题
<h2>hello s9!</h2>
<h3>hello s9!</h3>
<h4>hello s9!</h4>
<h5>hello s9!</h5>
<h6>hello s9!</h6>
hello s9!
<!--<img src="http://image.tianjimedia.com/uploadImages/2012/355/X1OT3M49V0D4_1280x1024dskfdspfs.jpg" alt="vvv在来的路上!">-->
# src---->原文件路径 alt---->提示信息，找不到图片所显示的 title---->鼠标移动到图片上会有提示
. /当前目录 不需要加
<img id="i1" src="lp.jpg" alt="新垣结衣" title="vvv">
<!-- 商品列表 开始 -->
<a href="http://www.luffycity.com" target="_blank">路飞学城</a> # 改成默认在新页面跳转
<!-- 商品列表 结束-->
<a href="#a2">a1跳a2</a>
# 点击(当前页面)会跳转到的网站 target='_blank'新页面跳转 默认_self当前页面跳转
<div style="height: 1000px;background-color: red"></div>
<a href="" id="a2">哈哈哈哈哈</a>
# 当前网页标签之间的跳转
# 通过#+id值进行跳转
</body>
</html>
body内常用标签
基本标签（块级标签和内联标签）
标签分类
块儿级标签 h1~h6 div p hr
默认占浏览器宽度
能设置长和宽
内联标签(行内标签) a img u s i b span
根据内容决定长度
不能设置长和宽
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行-->
特殊字符
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
<div>我是div标签</div> 单独显示一行 <div>我是div标签</div> <span>我是span标签</span> 在同一行 <span>我是span标签</span>
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，
还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
URL
<a href="http://www.luffycity.com" target="_blank">路飞学城</a> # 改成在新页面跳转 <a href="#a2">a1跳a2</a> # 点击(当前页面)会跳转到的网站 target='_blank'新页面跳转 默认_self当前页面跳转 <a href="" id="a2">哈哈哈哈哈</a> # 当前网页标签之间的跳转 # 通过#+id值进行跳转 绝对URL - 指向另一个站点（比如 href="http://www.jd.com） 相对URL - 指当前站点中确切的路径（href="index.htm"） 锚URL - 指向页面中的锚（href="#top"）
列表(有序、无序、标题)
1.无序列表(ul-->li)
无序列表和有序列表各自有不同的type属性
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
2.有序列表(ol-->li)
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
start定义起始顺序数字
标题列表(dl-->dt、dd)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
表格的基本结构
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
浙公网安备 33010602011771号