HTML总结

HTML总结

一、HTML的定义
HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言。HTML也在不断的更新,最新版本已经出现了HTML5。在HTML5中出现了许多新特性,也遗弃了一些旧元素。我们写好html文件后,在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。
二、HTML标签元素
HTML元素由开始标签和结束标签组成。如<p>/<p>,<h1><h1/>。虽然现在我们还不知道具体标签代表的意思,但标签一定是这样的格式:有一对开始<>和结束</>。一般标签名推荐用小写。标签具有属性,属性用来表示标签的特征。比如,我们用大小这个属性,来衡量一个苹果。所以,大小可以用来表示苹果的特征。属性时写在标签里面的,而且是开始标签内。
三、HTML 的基本结构

<html>
    <head>
        <title>这是我的博客</title>
    </head>
    <body>
      这是我的身体。
    </body>
</html>

第一个标签是告诉浏览器这是html文档的开始。Html文档的最后一个标签是,是告诉浏览器这是html的终止。标签之间的文本是头部信息,在之间的文本是文档标题,会显示在浏览器的窗口的标题栏。之间的文本是正文。
规范的html页面
1、文档声明

在前,要写文档声明语句: ,当然也可以用小写表示。文档声明的作用是告诉浏览器该文档遵循html规范。

2、标题

一般情况下,我们都会设定html文档的标题。这样的作用是使用户看起来感觉友好。标签为,标签内放标题名称。

3、页面编码

编码的种类有多种,但常用的是utf-8和gb2312。utf-8为多国语言编码,gb2312为中文简体编码。对于编码的详细问题,可以浏览博客。设置网页编码的语句为,是在标签内定义的。

4、页面关键字,内容

我们可以在文档中设置一些关键词,内容介绍。这样的好处是,当我们的网页发布在网上,用户可以通过在搜索框中输入关键字,找出一些比较符合的网页。这样一来,我们的网页便可以更容易地被别人访问。

四、常用元素
1、 换行符 <br />。换行对于文本编辑来说是最正常不过的了。当文字写满一行,需要换行。或者根据需要,在文本中换行。

<body>
   我要换行<br />换行后
</body>

2、段落 <p></p>
在写文章时,我们可以用p标签来定义一个段落。

<p>

UTF-8。UTF-8就是在互联网上使用最广的一种unicode的实现方式。

</p>

<p>

GBK编码,包括了GB2312中的编码,同时扩充了许多,通行于大陆。

</p>

在定义了段落后,可以利用属性align来对段落进行设置。属性align的值包括left(左对齐)、center(居中对齐)、right(右对齐)三种。

3、标题。标题有六种大小h后的数字越大,说明标题越大。分别为

<h1>标题1</h1>             

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

在这里插入图片描述
4、文本格式化,一些常用于设置文本字体的元素:

     <b>定义粗体文本</b><br />

     <i> 定义斜体文本 </i><br />

     <del>定义删除文本</del><br />

     <sup>定义上标字</sup><br />

     <sub>定义下标字</sub><br />

效果图如下:
在这里插入图片描述
5、定义超链接<a href=“URL”></a>
a标签用来定义一条超链接,其中要有的是href属性,href的作用是指明超链接要链接到的网址。除了href属性,还有title属性表示链接的提示信息。target属性表示链接的打开方式,即当点击了链接,选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(当前页),_top(当前页)。

<a href="#" target="_blank">百度一下</a> 

href的值可以是外部链接,也可以是内部文件,如***.html文件。

<a href=“http://www.163.com”>外部链接</a>

<a href=“about.html”>内部链接 </a>

href也可以链接到别的地址,如邮箱、电话、sms。

<a href=“1233456.qqcom”>邮件链接</a>

<a href=“tel:电话号码”>拨打电话</a>

<a href="sms:139xxxxxxx">发送短信</a>

6、 锚点

有时我们在浏览网页时会发现,有些网页比较人性化,会有点击返回顶部的按键。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。

<a href="#位置名"> </a>

<a name="位置名"> </a> 

如代码例子:

<a href="#map">跳转</a>

 <p id="map">代码代码</p>

7、图像<img />

在这里插入图片描述
8、地址的
当我们引入一个文件时,要写明它的地址,也就是目录所在。
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
HTML 标签自带样式总结: 1. `<h1>` - `<h6>` 标签:自带字体大小和加粗样式。 ``` <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h5> <h6>这是一个h6标签</h6> ``` 2. `<p>` 标签:自带行间距和首行缩进样式。 ``` <p>这是一个段落。</p> ``` 3. `<a>` 标签:自带链接样式。 ``` <a href="https://www.example.com">这是一个链接</a> ``` 4. `<ul>` 和 `<ol>` 标签:自带列表样式。 ``` <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <ol> <li>有序列表项1</li> <li>有序列表项2</li> <li>有序列表项3</li> </ol> ``` 5. `<img>` 标签:自带图片样式。 ``` <img src="example.jpg" alt="示例图片"> ``` 6. `<strong>` 和 `<em>` 标签:自带加粗和斜体样式。 ``` <strong>这是一个加粗文本。</strong> 这是一个斜体文本。 ``` 7. `<blockquote>` 标签:自带缩进和引用样式。 ``` <blockquote> <p>这是一个引用文本。</p> </blockquote> ``` 8. `<pre>` 标签:自带等宽字体和行间距样式。 ``` <pre> 这是一个预格式化文本。 </pre> ``` HTML 样式总结: 1. 内联样式:使用 `style` 属性来定义样式。 ``` <p style="color: red; font-size: 18px;">这是一个红色的段落。</p> ``` 2. 内部样式表:使用 `<style>` 标签来定义样式。 ``` <head> <style> p { color: red; font-size: 18px; } </style> </head> <body> <p>这是一个红色的段落。</p> </body> ``` 3. 外部样式表:使用外部 CSS 文件来定义样式。 ``` <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p class="red">这是一个红色的段落。</p> </body> ``` 其,`styles.css` 文件内容为: ``` p { color: red; font-size: 18px; } .red { color: red; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值