简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html/css 基础知识2019-01-16 10:52:06
Blogger Information
Blog 8
fans 0
comment 0
visits 6969
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html/css 基础知识2019-01-16 10:52:06
A云海的博客
Original
1039 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1> 元素定义一个大标题</h1>
    <p> 元素定义一个段落</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

一、什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

二、HTML 标签

2.1、排版标签

（1）、标题标签 <h1></h1>

h 即 head 的简写

有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。

基本格式<h1></h1>

像<h7>这种错误的标签在展示时不起作用

（2）、段落标签<p></p>

p 即 paragraph 的简写

基本格式<p>段落内容</p>

段落中的文本内容超出浏览器宽度之后会执行自动换行

（3）、水平线标签<hr />

hr 即 horizontal  的缩写

其作用是在页面中插入一条水平线

基本格式<hr />

这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）

（4）、容器标签 <div></div> 和 <span></span>

div 即 division 的缩写，分割、区分的意思

span 即 span ，跨度、范围的意思

这俩本质上是一个容器，类似于 Android 中的ViewGroup

基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>

2.2、文本格式化标签

标签 效果 <b></b>、<strong></strong> 加粗，

XHTML推荐使用<strong> <i></i>、<em></em> 斜体，

XHTML推荐使用<em> <s></s>、<del></del> 删除线，

XHTML推荐使用<del> <u></u>、<ins></ins> 下划线，

2.3、标签的属性

基本格式：<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>

标签可以拥有多个属性

属性必须写在开始标签中，位于标签名后面

属性之间不区分顺序

标签名与属性、属性与属性之间使用空格隔开

任何属性都有默认值，省略该属性表示使用默认值

2.4、图像标签 <img />

img 即 image 的缩写

基本格式<img src="图片URI/URL" />

<img />常用属性如下：

属性     属性值        属性含义

src    URI/URL    图像的路径    

alt         文本    图像无法正常显示时的提示文本    

title       文本    鼠标悬停于图像时显示的文本    

width     像素（XHTML 不支持按页面百分比显示）    图像的宽度    

height    像素（XHTML 不支持按页面百分比显示）    图像的高度    

border    数字    设置图像边框的宽度    

三、超链接标签

(1)、超链接标签<a></a>anchor 的缩写

基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>

href 即 HyperText Reference , 指定要跳转的URL地址

target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开

注意：

外链需要添加 http:// 或 https:// 前缀

内部链接 直接链接内部页面名称即可，如 <a href="index.html">首页</a>

如果当时没有确定链接目标时，可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接

各种网页元素，如 文本、图像、表格、音频、视频等都可以作为超链接的载体

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接文本示例</title>
</head>
<body>
    <a href="#" target="_blank">我是云海</a>
   
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四、列表标签

4.1、无序列表 <ul>

所谓无序列表就是以小圆点或者小方块作为行首标志的列表

无序列表的各项之间是并列的，没有顺序级别的区分

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表 ul</title>
</head>
<body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意：

<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签

<li></li> 之间相当于一个容器，可以嵌套任意标签

4.2、有序列表 <ol></ol>

内部也是嵌套<li></li>

默认以 1、2、3...作为行首排序标志

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表ol</title>
</head>
<body>
    <ol >
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4.3、自定义列表 <dl></dl>

<dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>

自定义列表项前不具有任何项目符号，既没有小圆点也没有1234

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>自定义列表项1</dt>
            <dd>自定义列表项1 的内容解释1</dd>
            <dd>自定义列表项1 的内容解释2</dd>
        <dt>自定义列表项2</dt>
            <dd>自定义列表项2 的内容解释1</dd>
            <dd>自定义列表项2 的内容解释2</dd>
    </dl>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

五、表格标签 table


<table></table> 用来定义表格，

<tr></tr> 用来定义行，嵌套在 <table></table> 中

<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中

<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素

表格相关的属性如下：

 

属性名称                      含义属性取值

 

border     表格的边框。默认 border="0",即无边框    像素值    

cellspacing    单元格与单元格边框之间的间距。
默认 cellspacing="2"    像素值    

cellpadding    单元格内容与单元格边框的间距。
默认 cellpadding="1"    像素值    

width    表格的宽度    像素值    

height    表格的高度    像素值    

align    表格在页面中的水平对齐方式    left 、center 、right    

caption    标题    文本    

colspan    从当前列向后 横跨几列, 应用于td、th    数字    

rowspan    从当前行向下 竖跨几行, 应用于td、th    数字    



实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
    <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
    </tr>
    <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
    </tr>
</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意：

表头一般位于表格的第一行或者第一列。

表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果

增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可

六、表单标签

6.1、input 输入标签

<input/> 为单标签（自闭合标签）

type 是其基本属性，用来控制输入的类型

input 、br、hr 、img、 base 都是单标签

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    用户名：<input type="text" maxlength="15"/>
    <br/>

    <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
    密　码：<input type="password"/>
    <br/>

    <!--使用name 限定了一组内容，从而实现单选-->
    性　别：
    <input type="radio" name="sex" checked="checked"/> 男
    <input type="radio" name="sex"/> 女
    <br/>

    爱　好：
    <input type="checkbox" name="hobby"/> 看电影
    <input type="checkbox" name="hobby"/> 读书
    <br/>

    <input type="button" value="普通按钮"/>
    <br/>
    <input type="submit" value="提交按钮"/>
    <br/>
    <input type="reset" value="重置按钮"/>
    <br/>
    <input type="image" src="#"/>
    <br/>

    请选择文件：<input type="file"/>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

七、多媒体标签

embed : 定义嵌入的内容

audio : 播放音频

video : 播放视频

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>embed</title>
</head>
<body>
<embed src="#"
       allowFullScreen="true" quality="high" width="480" height="350" align="middle"
       allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>

运行实例 »
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！