html笔记

最新推荐文章于 2023-04-27 17:35:42 发布

olindayu

最新推荐文章于 2023-04-27 17:35:42 发布

阅读量1.4k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/olindayu/article/details/103374155

版权

这篇博客详细介绍了HTML的基础知识，包括网页介绍、浏览器内核、Web的结构标准、HTML认识和标签的学习。讲解了HTML的各种标签，如标题、段落、图片、链接、表格和表单等，并涉及到相关属性的使用，是学习HTML的良好参考资料。

摘要由CSDN通过智能技术生成

html笔记

一、网页介绍

1.常见的浏览器有：IE 火狐谷歌（重要的） sarfari（苹果默认系统） opera 共五大浏览器

2.市场份额：谷歌 ie8

备注：win7的系统自带是IE8

二、浏览器内核

1.内核分为两个部分：渲染引擎和JS引擎

2.各个浏览器的内核：

Trident（IE内核）
Gecko（firefox）特点是：公开性
Wekit（safari）：chrome一开始也是用的这个内核，后来换成bink
chromium/bink（chrome）：bink是wekit的分支
Presto（opera）opera：后来换成bink

三.Web的结构标准

1.结构分为三部分：结构，表现，行为

2.三部分详情

结构标准：结构标准用于对网页元素进行整理和分类，主要包括xml和xhtml两部分，作用使内容更清晰，更有逻辑性

样式标准：表现用于设置网页元素的版式，颜色大小等外观样式，主要指css，主要是用于修饰内容的样式

行为标准：行为是指网页模型的定义以及交互的编写，主要包括DOM和ECMAScipt（简称js）两部分，内容的交互以及操作效果

理想中的编码一定要有：html（结构），css（样式），js（行为）

四.html的认识

1.html：是超文本标签语言，主要是通过html标签对网页中的文本，图片，声音等内容进行描述。

2.html的语言语法骨架格式

<html>根标签
    <head>头标签
        <title></title>标题标签
    </head>
    <body>主体标签
        
  	</body>
</html>

（1）html 标签：作用所有html中标签的一个根节点

（2）head标签：用于存放：title，meta，base，style，script，link，head中必须要设置title标签

（3）title标签：让页面有一个属于自己的标题

（4）body标签：页面再得主体部分，用于存放所有的html标签

3.html的标签分类

（1）双标签

格式为：<标签名>内容</标签名>

注意：<>标签开始部分

</>标签结束部分

/关闭符号

（2）单标签

也成为空标签

格式为：<标签名/>

4.html的关系

（1）嵌套关系（包含意义）

（2）并列关系

注意：如果两个标签之间是嵌套关系，要按tap键缩进字符，这样才会更加的美观

5.开发工具：

sublime快速生成方法–输入html或者！，再按一下tap键就可以了

这个是告诉我们使用的哪个版本，这个是代表是html 5的版本字符集,utf-8是目前做常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312，以后就同意用utf-8，这就避免出现字符集不统一而引起乱码的情况了

jb2312是代表简单中文

BIG5是代表繁体中文，港澳台等用

GBK包含全部中文字符，是gb2312的扩展，加入对繁体字的支持，兼容gb2312

utf-8则包含全世界所有国家需要用的字符集

五.标签学习

1.排版标签

（1）标题标签 h 双标签

h1–h6字体依次减小

语法格式为：文本内容

属性：align：left，center，right

示例：

<body>
    <h1 align="center">
        文本内容
    </h1>
</body>

（2）段落标签 p 双标签

语法格式为：

文本内容

<body>
    <p>
        内容
    </p>
</body>

自动换行功能

（3）水平线标签：

此标签属于单标签

属性：

width：设置水平线的宽度

size：设置水平线的高度

color：设置水平线的颜色

align：设置水平线的位置

left靠左

right靠右

center中间

示例：


    <body>
      <hr width="660px" height="2opx" align="left" color="red"/>
    </body>

( 4 )换行标签：

此标签属于单标签

示例：

<body>
    <p>
        文本内容文本内容<br />
        文本内容文本内容<br />
        文本内容文本内容<br />
    </p>
</body>

( 5 )div span 标签：没有语义

div：布局，分割的意思，其实有很多div组合网页

span：跨度，跨距；范围

语法格式：

文本内容

，文本内容</span》

2.文本格式化标签

（1）加粗标签：

b 或者 strong，建议加粗用strong，它有语义

语法格式：文本内容</b》，或者文本内容</strong》

（2）斜体标签：

i 或者em，建议用em

语法格式：文本内容</i》，或者文本内容</em》

（3）加删除线标签：

s 或者del,建议使用del

语法格式：~~文本内容</s》，或者文本内容</del》~~

（4 )加下划线标签：

u或者ins，不赞同使用u

语法格式：文本内容</u》，或者文本内容</ins》

注意：b i u s 只用使用，没有强调的意思；strong em ins del语义更强烈

3.标签的属性

属性就是特性，在使用html制作网页时，如果想让html标签提供更多的信息，可以使用html标签的属性加以设置，基本语法格式如下：

<标签名属性1=“属性值1” 属性2=“属性值2” …>文本内容</标签名>

注意：

1.标签可以拥有多个属性，必须在开始标签中，位于标签名后面

2.属性之间不分先后顺序，标签名与属性,属性与属性之间均以空格分开

3.任何标签的属性都有默认值，省略该属性则取默认值

4.图片标签：img 属于单标签

该语法中src属性用于指定图像文件的路径和文件名，他是img中的必须的属性

语法格式为：

img所有的属性：

src：图像的路径

alt：图像不能显示时的替换文本

title：鼠标悬停时显示的内容

width：设置图像的宽度，xhtml中不支持%页面百分比

height：设置图像的高度，xhtml中不支持%页面百分比

border：设置图像边框的宽度

示例：

<img src="纯色. jpg" alt="这是风景图片" title="清新淡雅" width="400px"

**5.链接标签：

a 英文单词anchor的缩写，意思是锚，铁锚的

基本语法格式如下：文本或者图像

属性：

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能

target：用于指定链接页面打开方式，其取值有self和blank两种，，其中self为默认值，blank为在新窗口打开

示例：

<a href="http：//baidu.com" target="_blank">百度</a  > ，其中black是在新窗口打开
    <a href="http：//baidu.com" tagert="_self">百度</a >  ，其中self是默认是在本窗口打开

注意：

1.外部链接需要添加http：//www.baidu.com

2.内部链接直接链接内部页面名称即可，比如首页</a》

3.如果当时没有确定链接目标时，通常将来凝结标签的href属性定义为：#（即href=”#“），表示该链接为一个空链接

4.不仅可以创文本超链接，在网页各种网页元素中，如图像，表格，音频，视频等都可以添加为超链接。

6.锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两部分

1.使用文本</a

2.使用相对应的id名标注跳转目标的位置

示例

<a href="#3">个人介绍</a>
<p id="3">
   文本内容 
</p>

7.base标签

此标签可以设置整体链接的打开状态

语法格式为：属于单标签

示例：

<html>
	<head>
		<title>网页跳转</title>
		<meta charset="UTF-8"/>
		<base target="_blank" />
	</head>
	<body>
		<h3>网页跳转</h3>
		<hr />
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.taobao.com">淘宝</a>
         <a href="http://www.jd.com">京东</a>
	</body>
</html>

8.特殊字符

常用的字符：

空格字符：&nbsp；

小于号字符：< &it；

大于号字符：> &gt

版权字符（圆圈里面有个c）：&copy；

9.注释标签

加了注释标签之后浏览器是不执行的，注释里面的内容浏览器是看不见的，但是作为html的一部分，它会下载到用户的计算机上，查看源代码就可以看见

<!--你好，这是源代码-->

10.图像路径

（1）相对路径

1.图像文件和html文件位于同一个文件夹：只需要输入图像的文件的名称即可，如

2.图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用/隔开，如

3.图像文件位于html文件的上一级文件夹：在文件名之前加入"…/",如果是上两级则需要是…/…/,依此类推，如

（2）绝对路径：完整的网络网址

例如：https://www.baidu.com

11.列表标签

（1）无序列表：没有顺序性 ul

语法格式：

<.ul>

文本内容
文本内容
文本内容
注意：

1.
中只能嵌套
,直接在
其他标签或者文字的做法是不被允许的

2.
之间相当于一个容器，可以容纳所有的元素

3.无序列表会带着自己的样式属性
```
<h2>水果</h2>
<ul>
  <li>香蕉</li>
  <li>苹果</li>
  <li>橘子</li>  
</ul>
```
（2）有序列表：ol，属性为type ：1 I A a,

如果不进行设置，就会默认数字123

<.ol>
文本内容
文本内容
文本内容
示例
```
<h2>水果</h2>
<ol type="a"
```

最低0.47元/天解锁文章

olindayu

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html笔记

html笔记一、网页介绍 1.常见的浏览器有：IE 火狐谷歌（重要的） sarfari（苹果默认系统） opera 共五大浏览器 2.市场份额：谷歌 ie8 备注：win7的系统自带是IE8二、浏览器内核 1.内核分为两个部分：渲染引擎和JS引擎 2.各个浏览器的内核：Trident（IE内核）Gecko（firefox）特点是：公开...
复制链接

扫一扫