一, html 是什么?
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言, 而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
二, HTML 基本结构
<html> ---- 根控制标记
<head> --- 头控制标记
<title > 这是标题 </title> ---- 标题标记
</head> ---- 头控制标记
<body>
----- 我是 Body!!!
</body>
</html> ---- 根控制标记
1,head 部分的标签
<title>,<base>,<link>,<meta>,<script> 以及 <style>title
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
meta
文档描述 [网站在搜索时, 进行描述.]
<meta name="description"content="在这里您可以详细浏览一汽 - 大众全线车型, 一汽 - 大众授权经销商, 一汽 - 大众二手车, 一汽 - 大众服务等内容, 体验一汽 - 大众精彩生活!">
文档关键词 [网站在搜索时, 进行关键字匹配]
<meta name="keywords"content="一汽 - 大众, 一汽大众官网, 大众一汽, 一汽官网, 一汽 - 大众官方网站">
重定向 [页面重定向]
<meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">
link 用于导入 CSS
<link rel="stylesheet"type="text/css"href="mystyle.css"/>
script 用于导入 js
<script type="text/javascript">
document.write("Hello World!")
style 用于定义 css
<style>
p {
background-color:red;
font-size:15px;
}
</style>
base: 定义页面上所有链接的默认地址或默认目标.
<base href="http://www.w3school.com.cn/i/" />
<img src="eg_smile.gif" /><br /> #引入图片时, 会和 base 进行拼接后再查找图片.
2,body 部分的标签
<h1~h6>: 从大到小. 表示标题.
<p>: 段落标签. 包裹的内容被换行. 并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup > 和 < sub>: 上角标 和 下角表.
<br/>: 换行. 单标签
<hr>: 水平线
<div> : 块, 主要用于布局
<span>: 内联标签
块级标签和内联标签区别
块级标签和内联标签
块级标签:<p><h1><table><ol><ul><form><div>
内联标签:<a><input><img><sub><sup><textarea><span>
block(块) 元素的特点
① 占领一整行, 新增元素新起一行;
② 高度, 行高以及外边距和内边距都可调整;
③ 宽度缺省是它的容器的 100%, 除非设定一个宽度, 一般都是占满一行.
④ 它可以容纳内联元素和其他块元素
inline 元素的特点
① 和其他元素都在一行上;
② 高, 行高及外边距和内边距不可改变;
③ 宽度就是它的文字或图片的宽度, 不可改变
④ 内联元素只能容纳文本或者其他内联元素
对 inline 元素, 需要注意如下
设置宽度 width 无效.
设置高度 height 无效, 可以通过 line-height 来设置.
设置 margin 只有左右 margin 有效, 上下无效.
设置 padding 只有左右 padding 有效, 上下则无效. 注意元素范围是增大了, 但是对元素周围的内容是没影响的.
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height: 图片的高 (宽高两个属性只用一个会自动等比缩放.)
<img src="http://www.w3school.com.cn/i/eg_tulip.jpg" alt="花朵" title="图片标题" width="100px" height="100px">
href: 要连接的资源路径 格式如下: href="http://www.baidu.com"
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
用于跳转 href : #书签名称.
<a href="http://www.baidu.com"><h3 > 点击我跳转到百度哦 </h3></a>
<a href=""target="_blank"><h3 > 点击在本页 </h3></a>
<ol>: 有序列表
<li>: 列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
<ul type="circle" >
<li > 无序列表 1</li>
<li > 无序列表 2</li>
<li > 无序列表 3</li>
<li > 无序列表 4</li>
<li > 无序列表 5</li>
</ul>
<ol type="a" >
<li > 有序列表 1</li>
<li > 有序列表 2</li>
<li > 有序列表 3</li>
<li > 有序列表 4</li>
<li > 有序列表 5</li>
</ol>
<table border="1" cellpadding="20px" cellspacing="10px" >
<th > 姓名 </th>
<th > 年龄 </th>
<th > 性别 </th>
<tr >
<td colspan="2" > 胖子 男占 2 列 </td>
<td > 男 </td>
</tr>
<tr>
<td rowspan="2" > 高个占 2 行 </td>
<td>11</td>
<td > 男 </td>
</tr>
<tr >
<td>qq</td>
<td > 女 </td>
</tr>
</table><br/>
<form >
<fieldset>
<legend > 用户信息 </legend>
用户名:
密码:<input type="password" id='password' name="password"><br/>
性别: 男 < input type="radio" name="sex" value="男">
女 < input type="radio" name="sex" value="女"><br/>
兴趣: 篮球 < input type="checkbox" name="hobby" >
足球 < input type="checkbox" name="hobby" >
水球 < input type="checkbox" name="hobby" >
玻璃球 < input type="checkbox" name="hobby" ><br/>
上传文件:<input type="file" name="file" ><br/>
所属部门:<select name="department" multiple>
<optgroup label="研发部">
<option value="de_01"> 研发 1 部 </option>
<option value="de_02" selected="selected"> 研发 2 部 </option>
<option value="de_03"> 研发 3 部 </option>
</optgroup>
<optgroup label="技术部">
<option value="mercedes"> 运维 </option>
<option value="audi"> 开发 </option>
</optgroup>
</select><br/>
个人说明:
<button type="button"> 提交 </button>
</fieldset>
</fieldset>
</form>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
来源: https://www.cnblogs.com/skyflask/p/8325035.html