一、随笔
学习HTML主要是因为今天去面试,发现有好多的内容都不是特别了解,所以准备系统地学一遍
二、注意
(1)HTML是一种用来描述网页的一种语言
(2)HTML值超文本标记语言
(3)HTML不是编程语言,是一种标记语言
三、HTML5新特性
(1)用于绘画的canvas标签
(2)用于媒介回放的video和audio元素
(3)对本地离线的更好支持
(4)新的特殊内容元素 如article、footer、header、nav 、section
(5)新的表单控制 如:calendar、date、time、enceil、url、search
(6)对浏览器的支持 如 Chrome 、Firefox、IE9以上等
四、 html基础讲解
1.声明:<!DOCTYPE>
HTML也有多个不通的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确地显示出HTML页面,这就是<!DOCTYPE>的用处。
HTML5: 即表明此页面使用的HTML版本是HTML5
2.基础标签:header 、body
所有的标签都会包含在《html》标签内,无论是头还是身体
header 标签中一般放入编码格式《meta charset=“UTF-8”》以及标题< title>Title</ title >还有文字的显示格式lang=“en”(英文还是中文)
body里面添加页面要显示的内容
3.HTML标题:< h1> ***< h6>等标签进行定义等,标题等级依次下降
4.HTML段落:< p >标签定义一个段落,也类似于换行
< br/>功能类似一个回车键的功能,即换行
<p>我爱你</p>
小莹
5.HTML链接:< a>标签定义链接
<a href="http://www.blog.csdn.net/JJJKJJ">大雷哥~博客首页</a>
6.HTML图像:< img>标签定义图像
[外链图片转存失败(img-kvHr0lfg-1562042283419)(https://mp.csdn.net/mdeditor/images/psb.jpg)]
五、HTML元素、属性、格式化
HTML元素
1.元素是指标签开始到结束标签的所有代码
2.HTML元素语法:
元素的内容是开始标签到结束标签之间的内容
空元素在开始标签中进行关闭
大多数HTML元素可拥有属性
3.嵌套的HTML元素:大多数HTML都可以
属性
1.标签可以拥有属性微元素提供更多的信息
2.属性以键/值对的形式出现
如:href=“https://blog.csdn.net/JJJKJJ”
3.常用标签属性:
4.通用属性:
HTML格式化
六、HTML样式、链接、表格
HTML样式
1.三种样式表插入方法:
外部样式表:
link根据一个rel的属性引入外部元素,指定文档类型,给出一个引入的地址
2.内部样式表:
3.内联样式表:在标签内部改变当前标签的属性
HTML链接
1.链接数据:文本链接;图片链接
2.属性:
href属性:指向另一个文档的链接
name属性:建文档内的链接
3.img标签属性:
alt:替换文本属性
width:宽
height:高
HTML表格
1.表格的列表
<table border="1">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ul>
</td>
<td>
我想吃了
<td>
</tr>
</table>
2.单元格边距:
3.单元格间距:
HTML列表、块和布局块
HTML 列表
HTML块
1.HTML块元素:
块元素在显示时,通常会以新行开始,如< h1>、< p>、< ul>
2.HTML内联元素:
内联元素通常不会以新行开始,如< b>、< a>、< img>
3.HTML< div>元素
< div>元素也被称为块元素,其主要是组合HTML元素的容器
<div>
<p>我爱你小莹</p>
<a>点击我啊</a>
</div>
div主要是配合一些样式来进行使用,比如说css样式
首先创建一个css样式
在这里插入代码片
div是如何通过css样式定义它呢?想引用的话,先给div 一个ID,通过它来索引要设置的div
<div id="divid">
<p>我爱你小莹</p>
<a>点击我啊</a>
</div>
在引入css样式的外部标签
<link rel="stylesheet" type="text/css " href="mystyle.css">
4.HTML< span>元素
< span>元素是内联元素,可作为文本的容器
<div id="divid">
<p><span>我爱你</span>小莹</p>
<a>点击我啊</a>
</div>
在这之前要在头文件中加入以下代码
<style type="text/css" > /*属于HTML的内部样式表*/
span{
color: #ff5840;
}
</style>
从此处附上以上部分所有代码
<!DOCTYPE html>
<html lang="en"> <!--语言-->
<head>
<meta charset="UTF-8"> <!--编码格式-->
<title>小莹</title> <!--标题-->
<style type="text/css"></style>
<link rel="stylesheet" type="text/css " href="mystyle.css"> <!--属于HTML的外部样式表-->
<style type="text/css" > /*属于HTML的内部样式表*/
span{
color: #ff5840;
}
</style>
</head>
<body >
<!--以下是HTML的格式化-->
<b>欢迎来吃博主撒的狗粮</b>
<br/>
<em style="color: darkslateblue">欢迎来吃博主撒的狗粮</em><!--属于HTML的内联样式表-->
<br/>
<i>欢迎来吃博主撒的狗粮</i>
<br/>
<small>欢迎来吃博主撒的狗粮</small>
<br/>
<strong>欢迎来吃博主撒的狗粮</strong>
<br/>
大家好<sub>欢迎来吃</sub>博主撒的狗粮
<br/>
大家好<sup>欢迎来吃</sup>博主撒的狗粮
<br/>
<ins>欢迎来吃博主撒的狗粮</ins>
<br/>
<p><del>欢迎来吃博主撒的狗粮</del></p>
我爱你
小莹
<h1 align="center">标题h1</h1>
<h2 class="h2ID">标题2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
<p>我爱你</p><!--段落-->
小莹
<a style="color: lime" href="https://blog.csdn.net/JJJKJJ" target="_blank">大雷哥~博客首页</a><!--文字链接-->
<br/>
<!--图片链接-->
[外链图片转存失败(img-yfVVJqMq-1562042283422)(https://mp.csdn.net/mdeditor/ying.png)]
<a style="color: lime" href="https://blog.csdn.net/JJJKJJ" >
<img src="ying.png" width="200px" height="200px" alt="blog.logo"
>
</a>
<!--建立文档内链接-->
<a name="tips">hello</a>
<bt/>
<a href="#tips">跳转到hello</a>
<!--HTML表格-->
<table border="1" ><!--border=1表示加边框-->
<!--创建表头-->
<caption>实验室401性别统计</caption>
<!--各自单元格-->
<tr>
<th>男</th>
<th>女</th>
<th>不男不女</th>
</tr>
<tr>
<td>齐雷</td>
<td>云茜</td>
<td>晓飞</td>
</tr>
<tr>
<td>良玉</td>
<td>明月</td>
<td>名群</td>
</tr>
<tr>
<td>向涛</td>
<td>云云</td>
<td>哈哈哈</td>
</tr>
</table>
<div id="divid">
<p><span>我爱你</span>小莹</p>
<a>点击我啊</a>
</div>
</body>
</html>
HTML布局
1.使用< div>布局
</div>
<div id="container">
<div id="heading"></div>
<div id="content_menu"></div>
<div id="content_body"></div>
<div id="footing"></div>
</div>
但是只有这样的代码网页上是不会显示任何效果的
需要进行样式设计,通过style来引入
<style type="text/css">
body{
margin: 0px;
}
div#container{
width: 100%;
height: 950px;
background-color: darkgray;
}
div#heading{
width: 100%;
height: 10%;
background-color: #93a915;
}
div#content_menu{
width: 50%;
height: 80%;
background-color: #45a9a3;
float: left;
}
div#content_body{
width: 50%;
height: 80%;
background-color: #2221a9;
float: left;
}
div#footing{
width: 100%;
height: 20%;
background-color: #45a9a3;
clear: both;
}
</style>
2.table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
<!--这里的colspan表示的是分成单元格的列数-->
<td colspan="2" width="100%" height="10%" style="background-color: #a90f11">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: lime">左菜单</td>
<td width="70%" height="80%" style="background-color: blue">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" colspan="2" style="background-color: aqua">这是底部</td>
</tr>
</table>
</body>
</html>