html
2019-04-02 本文已影响0人
金石_832e
html是超文本标记语言，其特点是由标签组成
html标签内是由head、body标签组成的，也可称之为页面头、页面体
<!DOCTYPE html>
<html>
<!--页面头-->
<head>
<!--
meta元标签：
charset属性：编码字符集<utf-8>
-->
<meta charset="UTF-8">
<!--页面标题-->
<title>标题</title>
<!--页面标题图片，其后缀必须是.icon-->
<link rel="icon" href="tupian.ico" type="image/x-icon"/>
</head>
<!--页面体-->
<body>
身体
</body>
</html>
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，分为两大类：块元素、内联元素（行内元素）。
- 块元素block：默认独占一行，默认高度为0，其高度可以被其中的内容撑开，支持宽高。
- 内联元素inline：默认不独占一行，不支持宽高。
常用的块元素有：div、h1、h2、h3、h4、h5、h6、p、dl、ol、ul、pre、br
常用的内联元素：img、strong、i（em）、a、span
//特殊的符号
空格：  
<和>：大于号>,小于号<
版权符号：©
<!DOCTYPE html>
<html>
<!--页面头：一些配置型的标签-->
<head>
<!--
meta元标签：
charset属性：编码字符集<utf-8>
-->
<meta charset="UTF-8">
<!--页面标题-->
<title>第一个页面</title>
<!--页面标题图片，其后缀必须是.icon-->
<link rel="icon" href="tupian.ico" type="image/x-icon"/>
</head>
<!--页面体：页面内容-->
<body>
<a href="#dest">锚点：看看会跳转到哪里</a>
<!--
<标签 属性>内容</标签>
块元素 block：默认独占一行，支持宽高
div 没有任何样式
h1-h6 字体大小和加粗
p 存在外边距
pre :
列表：dl ol ul
内联元素（行内元素）inline：默认不独占一行,不支持宽高
strong 加粗
em 斜体
a
span
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--段落标签-->
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<!--换行标签br-->
<p>若不加br标签换行
会被解析成一个空格，多个换行和空格都会被解析成一个空格</p>
<div>如果想换行就要写个“br”<br>现在就代表换行成功</div>
<!--所见即所得：pre标签里面怎么写，就怎么展示给用户-->
<pre>
呵呵 123
哈哈
</pre>
<!--水平线标签:其实并不是线，是宽度为0的框-->
<hr>
<hr />
<strong>字体加粗</strong>strong是内联元素<em>斜体字</em>
<br>
<i>i标签和em标签功能一样，都是斜体标签</i>
<!--
特殊符号
空格：  ；
>和<：大于号>，小于号<
©:版权符号
-->
<p>
我就是想试试中间的 好事不好使<br>
大于号是> 小于号是<<br>
版权符号是啥©
</p>
<!--
图片标签img
src:图片路径
绝对路径：从盘符开始算起的路径
D:\Html练习代码\Html_css_js\20190402\img\xunguang-4.jpg
相对路径：相对当前文件的所在路径
alt:当图片因错误无法显示的时候，提示的信息。
title：当鼠标放在图片上做的提示
-->
<img src="img/xunguang-4.jpg" alt="唯美图片" title="中国山水甲天下"/><br>
<img src="../20190401/xunguang1.jpg"/><br>
<!--
超链接标签a
href:链接地址
target：是否从当前页面跳转_self是默认值，表示从当前页面跳转，_blank在新网页打开链接地址
锚点：某个元素的ID可以跳转到该ID的对应元素的位置
-->
<a href="https://www.hao123.com" target="_blank">从新网页打开链接</a><br>
<a id="dest">跳转当本页面的该处</a>
<a href="https://www.hao123.com" target="_self">从当前网页打开链接</a>
</body>
</html>
图片1
锚点：
在一个a标签处设置锚点，通过href="#要跳转到的标签ID"，通过单击找到要跳转到的标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚点</title>
<style type="text/css">
div {
width: 50px;
}
</style>
</head>
<body>
<div>
<a href="#test">我是锚点</a>
哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节<br>
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br> 哈哈哈哈哈哈啊哈哈哈的无脑了地位和骄傲啤酒的破位军坡节
<br>
</div>
<p id="test">跳转到该处</p>
</body>
</html>
锚点也可以跨页面跳转，例如在新的页面建立锚点，跳到上面代码的<p id="test">跳转到该处</p>处
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="简单的标签.html#test">新页面的锚点</a>
</body>
</html>
图片标签img
src:图片路径
绝对路径：从盘符开始算起的路径
D:\Html练习代码\Html_css_js\20190402\img\xunguang-4.jpg
相对路径：相对当前文件的所在路径
alt:当图片因错误无法显示的时候，提示的信息。
title：当鼠标放在图片上做的提示
列表标签：ul、ol、dl
三种标签除了格式不一样，其余全一直，一般在开发时，在css中都会清除掉标签的格式再重新画，因此记住其中一个即可。
ul:无序标签
ol:有序标签
dl:自定义标签
标签的嵌套规则：内联元素不能嵌套块元素（内联元素不能做块元素的父元素）
这三个标签的子标签为<li>标签
<!DOCTYPE html>
<html>
<!--
在head当中head为父级元素，meta和title是子级元素
-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol type="A">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
<h1><a href="script:;">你好</a></h1>
</body>
</html>
<a href="script:;">代表的是一个无效的空链接
列表的常用嵌套
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>
<h4>我的好友</h4>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
</li>
<li>
<h4>我的家人</h4>
<ul>
<li>小明</li>
<li>小李</li>
<li>小张</li>
</ul>
</li>
<li>
<h4>黑名单</h4>
<ul>
<li>王八蛋</li>
</ul>
</li>
</ul>
</body>
</html>
效果如图所示
image.png
超链接标签<a>
<a href="https://www.hao123.com" target="_blank">链接名称</a>
href：链接的网址
target：如果不写，则默认target="_self" 从当前页面跳转。如果target="_blank"则表示从新的空白页面跳转。
