HTML个人学习笔记（一）

最新推荐文章于 2024-08-13 15:50:34 发布

挚念　Sincere

最新推荐文章于 2024-08-13 15:50:34 发布

阅读量167

点赞数 2

分类专栏： JavaScript学习文章标签： HTML个人学习笔记

本文链接：https://blog.csdn.net/weixin_35857412/article/details/100155046

版权

JavaScript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML学习(一)基础篇

HTML简介

基本概念

HyperText Markup Language 超文本标记语言

实例学习

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例学习</title>
<link />
<script />
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

实例解析

文档类型定义

<!DOCTYPE html>声明为 HTML5 文档

DOCTYPE声明不是HTML标签;它的作用是指示web浏览器使用哪个版本的HTML进行编写.

在HTML 4.01中,DOCTYPE声明引用DTD,因为4.01基于SGML.DTD规定了标记语言的规则,使浏览器正确展示内容.

HTML5不基于SGML.

HTML页面根节点

<html>

文档元数据

<head>包含了文档的元数据,如<meta charset="utf-8">

meta标签的应用

meta标签是HTML标记HEAD区的关键标签,提供文档字符集,使用语言,作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎的优化(SEO).

常用的meta设置

http-equiv类型

<meta charset="utf-8"/>html5 设定页面使用的字符集.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">指定IE使用最新的引擎渲染,可以激活Chrome Frame.

name类型

<meta name="author" content="xxx" />标明网页的作者.

<meta name="keywords" content="学习,IT">页面关键词,用于被搜索引擎收录.(基本弃用)

keywords是如何在SEO中产生影响的?是否应当使用keywords?

Meta Keywords

慎用甚至不要用Meta Keywords

搜索引擎

Meta Keywords和描述Description的优化作用

<meta name="description" content="编程知识学习网站">页面描述,用于被搜索引擎收录.

<meta name="viewport" content="">用于控制页面缩放,移动端自适应.

<meta name="renderer" content="webkit|ie-comp|ie-stand">指定双核浏览器的渲染方式.

文档标题

<title>描述文档的标题,SEO关注点之一.

页面内容

<body>可见的页面内容

HTML标题

<h1>--<h6>标题.SEO关注点之一.其中h1是SEO中权重最高的H标签.

HTML段落

<p>html段落

html段落中折行使用<br>标签

HTML链接

<base href="" target="">base标签定义了页面中所有链接的默认目标地址.

<a href="www.baidu.com" target=""></a>HTML链接,href指定链接的地址.

超链接设置了CSS样式,展示样式会根据CSS设定而显示.

target属性

该属性定义了在何处打开连接文档

_blank 浏览器总在一个新打开,未命名的窗口中载入目标文档.
_self a标签中的默认目标,只有和标签的target属性一起使用才有意义.
_parent 在父框架集中打开被链接文档.
_top 在整个窗口中打开被链接文档.
framename 在指定的框架中打开被链接文档.

HTML图像

<img src="" alt="" width="100" height="100" />src指定图片的地址,alt属性用来设置图片未能正确加载时的提示文本

设置大小有助于防止图片未能加载导致的页面布局破坏.

usemap属性创建图像映射.创建可供点击的图像地图.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
</map>

HTML注释

<!-- 注释 -->

HTML链接标签

<link rel="stylesheet" type="text/css" href="xxx.css">链接到样式表

script元素

<script>用于加载客户端脚本,如JavaScript.元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件.

布局标签div

<div>

<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
	<title>我的布局测试</title>
</head>

<body>
	<div id='container' style='width:600'>
		<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:300px;float:right;">
内容在这里</div>
	</div>
</body>
</html>

表单和输入

<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
	<title>表单测试</title>
</head>
<body>
	<form action='xxx.php'>
	test:<input type="text" name="text test" value='默认'><br>
	<input type='submit' value='提交'>
	</form>
</body>
</html>

iframe标签显示其他页面

<iframe src="" width="100" height="100" frameborder='0'></iframe>

可以搭配<a>标签使用

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

更多标签学习

HTML速查列表

本段学习拓展知识集

SEO优化

SEO之HTML优化：让你的网站HTML代码更符合SEO规范

基于Html的SEO(很基础,更是前端必须掌握之点)

HTML的SEO（搜索引擎优化）标准