前端学习(一) HTML基础

HTML基础  入门、标签讲解

 

一、入门

一个不需要编译,直接由浏览器执行的文本文件,且必须使用html或htm为文件名后缀,但大小写不敏感,HTML和html一样;它的主要功能就是由浏览器执行向浏览者展示一个页面;

基本语法

<标签名></标签名>      例如:<html></html>

规范:<和>括起来,开始标签和结束标签成对出现,结束标签比开始标签多了一个/,单标签没有结束标签,开始标签为多了一个/,例如:<标签/>

基本结构

<!DOCTYPE html>
<html>
  <!-- html文件 -->
  <head></head> 头部信息
  <body>...</body> 网页内容
</html>

<!DOCTYPE html>声明必须放在HTML文档第一行,用来声明文档类型为html

二、标签讲解

1、常用的基本标签

标题标签:<h1></h1>~<h6></h6>

段落标签:<p></p>

    align对齐属性值:
    left:左对齐
    center:居中对齐
    right:右对齐
    justify:伸展对齐

换行标签(空标记):<br />

空格标记:&nbsp;

水平线标签:<hr />

    width:宽度设置,可以用像素或者百分比
    color:颜色设置
    align:对齐方式设置
    noshade:有无阴影效果设置

2、常用的文字修饰标签

文字斜体:<i></i>、<em></em>

加粗:<b></b>、<strong></strong>

下标:<sub></sub>

上标:<sup></sup>

下划线:<ins></ins>

删除线:<del></del>

3、列表标签

1)无序列表

<ul type="">
   <li></li>
   <li></li>
   ...
   <li></li>
</ul>

type属性:disc(圆点)、square(正方形)、circle(空心圆)

2)有序列表

<ol type="">
   <li></li>
   <li></li>
   ...
   <li></li>
</ol>

type属性

    1:数字
    a:小写字母
    A:大写字母
    i:小写罗马数字
    I:大写罗马数字

2)定义列表

<dl>
   <dt>定义列表项</dt>
   <dd>列表描述项</dd>
   <dd>列表描述项</dd>
   ...
   <dt>定义列表项</dt>
   <dd>列表描述项</dd>
</dl>

一个<dl>可以有多个<dt>标签,一个<dt>可以有多个<dd>标签,且<dt>和<dd>是同级标签,互相不可嵌套,并且必须要在<dl>标签内;

在一般开发中,<ul>和<ol>后面的type属性一般用自制图片代替;

4、图像标签

图像标签:<img src="" alt="" ../>

src:URL,显示图像的URL;

alt:文字值,图像替代文本;

height:数值或百分比,图像的高;

width:数值或百分比,图像的宽;

相对路径:从当前网页路径开始的路径;

绝对路径:从根文件开始的路径;

注意:路径文件名尽量用英文表示;

当由于网速太慢、src属性中的错误或者浏览器禁用图像等原因导致用户无法查看图像,alt属性可以代替图像显示在浏览器中的内容;

5、超链接标签

<a href="">内容</a>

href:链接地址,可以是内部链接或外部链接;当href="#"时表示一个空链接;

target:链接目标窗口,常见的有_self、_blank、_top、_parent;

title:链接提示文字;

name:链接命名;

定义锚:定义锚的位置和锚名,设置寻找锚的链接;

<a href="#锚名称">目录</a>
...
<a href="链接地址" name="锚名称">内容</a>

扩展:电子邮件链接

<a href="mailto:邮件地址">...</a>

前端HTML知识比较繁杂,但是也是很常用的,希望大家如果感兴趣的话,可以多多看看网站的源码,自己动手去多实现,我们大家一起加油~

发布了622 篇原创文章 · 获赞 150 · 访问量 31万+

猜你喜欢

转载自blog.csdn.net/feizaoSYUACM/article/details/84712398