一、随笔
学习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>
1197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
