我的web全栈工程师之旅之HTML入门教学一：HTML基础_html入门专业术语解释教学经验-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38399751/article/details/80616348

1. 什么是HTML?

    1)  Hyper Text Markup Language(超文本标记语言)，是一种用来描述网页的标记语言
    2)  HTML不是一种程序语言，不强调任何的逻辑性
    3)  HTML是由一套标签组成：

    （1）双标签格式：<标签名称></标签名称>
                    例如：<body></body>
    （2）单标签格式：<标签名称/>
                    例如：<br/>

2. 开发工具

记事本、EditPlus（收费）、sublime（收费）、WebStorm（收费）、HBuilder（免费，博主推荐）

3. 基本结构

<html>

    <head>
        <title>这是网页浏览器的标题</title>

    </head>
    <body>
        这里写网页主体内容
    </body>

</html>

4. 网页头部的信息标签

1)  title   网页的标题
2)  meta(了解)

例如：

<head>
		<meta charset="utf-8" />
		<title>html基础</title>
		<meta name="author" content="苏醒"/><!--作者-->
		<meta name="keywords" content="html基础"/><!--关键字，可以有多个-->
		<meta name="description" content="html入门的一门课"/><!--本页描述内容-->
</head>

==========================文本标签=============================

1、标题标签:

<h1>标题</h1>
        ........
<h5>标题</h5>
<h6>标题</h6>

<h1>字体最大 <h6>字体最小

2、段落标签

<p>……</p> 段落前后会空一行

<p>这是一段话。会自动换行</p>

3、换行标签

<br/>

4、水平线标签

<hr/>

5、字体样式标签

 <strong>静夜思</strong> 加粗、<em>静夜思</em> 斜体

6、特殊符号标签

空格（ ）   &nbsp;
大于号（>） &gt;
小于号（<） &lt;
引号（“）   &quot;
版权申明    &copy;

注：分号也要写下来哦!

7、注释

<!--被注释的代码-->

被注释的文字不会执行，只是方便程序员开发

==========================图像标签(重点)===============================

<img src="图片的路径" alt="图片加载失败提示信息" width="图片的宽度" height="图片的高度"/>

绝对路径：从根盘符开始寻找资源

相对路径：从页面所在的位置开始寻找资源

===========================链接标签===================================

1、超链接

<a href="链接路径" target="目标窗口">连接显示的文字或者图片</a>

target属性常用的值：
_self：表示在本窗体打开目标页面
_blank：表示在新窗体中打开目标页面
 
普通文本超链接：<a href=”目标位置”></a>
图片超链接：<a href=”目标位置”><img/></a>
空连接：<a href=”#”></a>

2、锚链接

1）同一页面的锚链接先创建标记 <a name="标记名称">标记位置</a> 再创建锚链接：点击该链接就会跳转到标记位置 <a href="#标记名称">锚连接位置</a> 2）不同页面之间的锚链接先在B页面创建标记 <a name="标记名称">标记位置</a> 再在A页面创建锚链接 <a href="B页面#标记名称">锚连接位置</a>

3、功能性链接(了解)

邮件连接：

       <a href="mailto:webmaster@turing.cn">联系我们</a>
 注意：mailto使用的前提是电脑中安装的邮件客户端

==============================列表===================================

1、有序列表

<ol type="1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
</ol>

ol标签有个type属性用来设置项目符号的显示样式

1      使用数字作为项目符号，就是<li>标签前显示的东西，这个值是默认的
A/a  使用大写字母/小写字母作为项目符号
I/i      使用大写/小写罗马字作为项目符号

2、无序列表

<ul type="disc">
			<li>1</li>
			<li>2</li>
			<li>3</li>
</ul>

ul标签有个type属性用来设置项目符号的显示样式：

disc    项目符号显示为实体圆心，默认值
square    项目符号显示为实体方心
circle    项目符号显示为空心圆

3、定义列表

	<dl>
			<dt>所属学院</dt>
			<dd>计算机学院</dd>
			<dt>所属专业</dt>
			<dd>软件工程</dd>
	</dl>

说明：
    dl：定义列表标签
    dt：定义列表标题
    dd：定义列表内容

==========================表格============================

1、基本结构:行、列、单元格

2、基本语法

3、对齐方式

    1）表格的对齐：
        align=left(左对齐,默认)、center(中间)、right(右对齐)
    2）单元格的对齐：
    align=left(左对齐,默认)、center(中间)、right(右对齐)
        valign=top(顶部)、middle(居中,默认)、bottom(底部)

4、表格其他属性

width：表格的宽度    可以用像素来设置，也可以使用百分比来设置
height：表格的高度
border：表格的边框宽度
cellspacing：表格单元格之间的距离
cellpadding：单元格中的内容与单元格边框的距离
bgcolor：设置背景颜色

5、表格跨列、跨列

例如：

利用跨行、跨列实现如下效果：

6、表格的嵌套

表格嵌套就是指表格中包含了其他表格,例：

 <table>
    <tr>
        <td>1</td>
        <td>
<table>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
 </table>
        </td>
    </tr>
 </table>

7、表格中的其他标签

th: 列名单元格，字体默认会变粗并居中对齐
caption: 表格标题

注：表格可用在表单中布局

整理来自鲁班学院课堂笔记