学习笔记————第三节：html基础篇

一、html基本结构

<!DOCTYPE html>

<head>

<title>无标题文档</title>

</head>

<body>

</body>

</html>

说明：(1)<!DOCTYPE html>:声明为HTML5文档

（2）html是hyper text markup language的简写，是超文本标记语言。

（3）lang=“en”———>语言为英文。

（4）<head> </head> 结构标签，<head>里的元素页面不可见，用来修饰<body>元素；

<body> </body> 结构标签，<body>里的元素页面可见。

（5）charset----->字符集

gb2312：简体字；gbk（繁体字）；

unicode：万国码（所有国家的语言都可显示）------->升级版：utf-8。

（6）<title>标签描述了网页的标题。

二、html的标签

1.html标题：<h1>~~<h6>，标题的字体加粗，从h1到h6字体依次减小(h1最大，h6最小）。

写法：<h1>这是一个标题</h1>

2.html段落：<p>，独成一段。

写法：<p>这是一个段落</p>

3.html链接：<a href=" ">这是一个链接</a>

(1)-target属性：<a herf=" " target="-blank"></a>跳转到新页面

4.单标签，无结束标签。

换行：<br> 水平线：<hr>

5.html注释：(ctri+/自动生成注释）

6.html文本格式化标签：<b>、<strong>定义粗体，<i>定义斜体，等。

7.html图片：<img src=" ">

(1)引入图片的三种方法：

（1）引入在线图片，<img src="网上图片的位置信息(类似于网站地址）">

(2)本地的相对路径(常用）：D:a/b/lesson2.html(编写的html文件所在位置）

D:a/b/123.jpg(图片位置）

(3)本地的绝对路径：D:a/b/lesson2.html(编写的html文件所在位置）

D:a/b/c/123.jpg(图片位置）

注： ../是返回上一级目录的意思，../../返回两级，./当前目录.

例如：（3）可写成<img src="../123.jpg">

(2)alt属性：<img src=" " alt="这是一个图片">浏览器无法显示图片时，显示alt属性的内容

8.HTML<head>

（1）<head>元素：在<head>元素中可以插入scripts，css，及各种meta信息，可添加<title>,<style>,<meta>,<link>,<script>,<base>标签

9.HTML CSS

（1）内联样式：<p style="color:blue;margin-left:20px;">这是一个段落</p>

（2）内部样式表：

<head>

body{background-color:red;}

p{color:blue;}

</style>

</head>

(3)外部样式表：

<head>

</head>

10.HTML表格

<table>定义表格 <th>表格表头 <tr>表格的行 <td>表格单元 <caption>表格标题

例如：

11.列表

（1）有序列表：

例如：浏览器中显示：

<ol> 1.coffee

<li>coffee</li> 2.milk

</ol>

（2）无序列表：

例如：浏览器中显示：

<ul> •coffee

<li>coffee</li> •milk

</ul>

12.块级元素：<div> <span>

13.HTML表单：<form> input元素 </form>

<form>

<input type="text" name="" value="">文本框

<input type="password" name="" value="">密码框（输入密码不可见）

<input type="radio" name="" value="">单选（name值一定要相同）

<input type="chexkboxes" name="" value="">多选

<input type="submit" name="" value="">提交按钮

14.HTML框架

url指向不同的网页（另一个HTML代码）

15.HTML颜色

（1）英文单词：red，green，blue。。。。（不推荐使用）

（2）颜色代码：三原色：r（red） g（green） b(blue)

饱和度：00~ff 00~ff 00~ff

颜色可以表示为：#00ff00或#ff3456

16.解决乱码：（先看是否有<meta charset="utf-8">）

（1）用记事本打开乱码文件。（2）点击文件-->另存为（3)找到编码，选择utf-8，保存。

posted @ 2019-11-25 21:15 &3238314129 阅读(144) 评论(0) 收藏举报

刷新页面返回顶部

&3238314129

学习笔记————第三节：html基础篇

公告