HTML快速入门

HTML入门必须的就是标签,我整理了常用的标签,及自己的理解,希望大家都能有逻辑的整理记忆,是学会的关键。

html 大概有10类型的标签,下点功夫记住,基础不牢,地动山摇!

定义-文本-图片-头部标签-表格-表单-区块-内联-嵌入类-颜色 (便于记忆的类型简写)

1.HTML 超文本标记语言
简单说ie会根据标签的内容调整数据格式、样式。基础页面,会有标题和主体。这是根据ie结构形成的。

html5 开始是为了移动端支持多媒体资源,大部分pc的ie也会支持的。如果不写移动端,可以先不研究!

最简单的页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.baidu.com</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

注释:
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

2.文本类标签 (1标题 6字体 2段落)
标题:
只有字体大小的区别
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

字体大小:
<font size="6">这是6号字体文本</font>

字体格式:
可以理解为粗体和斜体:
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<strong> 定义加重语气

超链接:
通过字符 跳转到另一个页面。
<a href="https://www.runoob.com">这是一个链接</a>


段落:
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

 

换行符:
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

2.图形标签(2图形)
<hr> 标签
在 HTML 页面中单独使用创建水平线。

ing 单独使用显示一张图片。
<img src="/images/logo.png" width="258" height="39" />


3.功能行标签:
主要定义在头部。
<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
<meta charset="utf-8">
为搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<link> 标签通常用于链接到样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style> 标签定义了HTML文档的样式文件引用地址.

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>


4.特殊格式-
表格:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

列表:
无序列表(前面多个圆圈,并且 单独一行)
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表(前面有数字)
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>


自定义列表:标题和内容会分行显示,切记!
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下:

Coffee
- black hot drink
Milk
- white cold drink

5.区块和内联 元素:
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
内联元素在显示时通常不会以新行开始。

区块元素div作用:
a.让内联元素换行
b.让许多元素组合在一起,并配置一个css样式
c.可以 替代table

内联元素的作用:span
让行级别的元素配置css样式
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

#利用b功能div布局页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.baidu.com</title>
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">


</div>

</body>
</html>


6.表单:
就是一个用户输入的文本框,可以同时写多个,不会换行。

基础格式:
有一个字段:里面默认输入文本:
文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。


密码字段:
密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

注意:密码字段字符不会明文显示,而是以星号或圆点替代。

 

单选按钮(Radio Buttons)
通过勾选按钮,提交里面定义好的值!

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框(Checkboxes)

同上方形按钮:
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>


提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。


7.页面镶嵌
多个网页整合到一起:
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

8.颜色:
页面可以显示1600万种颜色,一般通过16进制字符显示,6位即可显示1600万个颜色!!!
三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。

举例:
#FFFFFF 白色

感悟

一个工作勤奋的人,能从说话的语气中感受的到!

--Eden.C

posted @ 2020-07-30 15:41  空程  阅读(175)  评论(0)    收藏  举报