HTML基础

最新推荐文章于 2022-09-25 12:26:09 发布

woniu_li

最新推荐文章于 2022-09-25 12:26:09 发布

阅读量143

点赞数

分类专栏： HTML基础

本文链接：https://blog.csdn.net/woniu_li/article/details/108324120

版权

HTML基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是HTML

Hyper Text Markup Language（超文本标记语言）
HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的渣渣页面</title>
</head>
<body>
	上边的<title>标签之间的内容为整个网页的标题。
	这是主体页面，网页上显示的内容都要写在两个<body>标签之内。
</body>
</html>

HTML的标签基本上是成对出现的，分别叫做开始标签和闭合标签；单独呈现的标签（空元素）为单标签，如：<br/>，单标签用一个带“/”的元素来关闭标签。

网页的基本标签

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>
</html>

页面显示

2.** 段落标签：<p>…</p>**

换行标签：<br/>
水平线标签：<hr/>
字体样式标签

字体加粗：<b>…</b>或<strong>…<strong>
斜体：<em>…</em>

特殊符号

空格：&nbsp;
大于号：&gt;
小于号：&lt;
引号：&quot;
版权符号：&copy;
注释：<!--...-->

图像标签：

<img src=“地址” alt=“text” title=“text” width=“x” height=“y” />
src：图片地址（尽量使用相对路径）。
alt：当图片无法显示时的代替文字。
title：鼠标在图片上悬停时的提示文字。
width：图像宽度，单位px(像素)。
geight：图像高度，单位px（像素）。

超链接

<a href=“地址” target=“目标窗口位置”> 链接文本或图像 </a>
href：链接路径。
target：链接是否打开新的窗口（默认在当前窗口打开新页面）。
常用值：_self：在当前窗口打开。_blank：在新的窗口打开页面。

锚链接

在本页面间的跳转
从甲位置跳转到乙位置
目标位置：<a name=“marker”>乙位置</a>
起始位置：<a name="#marker">甲位置</a>
name的属性值market为自定义的。
不同页面间的跳转只需要在 “#”号前边加上链接地址即可。

功能性链接（连接到邮箱服务器）
<a href=“mailto:1753797518@qq.com”>联系我们</a>

列表

无序列表

<ul>   				<!--声明无序列表-->
    <li>男装</li>	<!--声明列表项-->
    <li>女装</li>
</ul>

有序列表

<ol>   				<!--声明有序列表-->
    <li>男装</li>	<!--声明列表项-->
    <li>女装</li>
</ol>

定义列表

<dl>   				<!--声明定义列表-->
    <dt>水果</dt>	     <!--声明定义列表项-->
    <dd>苹果</dd>
    <dd>香蕉</dd>
</dl>

表格

基本语法：

<table border="1">   <!--表格标签 border属性标记是否显示表格边框。1为显示，默认不显示-->
    <tr>             <!--行标签-->
        <th>一行一列</th>   <!--列标签，通常用作第一行的列标题-->
        <th>一行二列</th>
        <th>一行三列</th>
    </tr>
    <tr>
        <td>二行一列</td>   <!--td列标签和th相比字体没有加粗-->
        <td>二行二列</td>
        <td>二行三列</td>
    </tr>
</table>

显示效果
设置跨列

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>	<!--colspan属性设置横跨多少列-->
    </tr>
    <tr>
        <td>张三</td>
        <td>137...</td>
        <td>138...</td>
    </tr>
</table>

显示效果
设置跨行

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">张飒</th>
    </tr>
    <tr>
        <td rowspan="2">电话</td>	<!--rowspan属性设置竖跨多少行-->
        <td>137...</td>
    </tr>
    <tr>
        <td>138...</td>
    </tr>
</table>

显示效果
下拉列表

<select>
    <option value="" hidden>请选择身份</option>	<!--hidden可以隐藏当前元素，可用作下拉列表的提示信息-->
    <option value="1">爸爸</option>
    <option value="2">妈妈</option>
    <option value="3">孙子</option>
    <!-- selected 默认选中
    <option value="4" selected>儿子</option>		<!--selected 元素指示下拉列表默认选中当前元素，不建议和hidden同时使用-->
    -->
    <option></option>
</select>