0

0

HTML入门基础

墨辰丷

墨辰丷

发布时间:2018-05-16 09:20:05

|

3723人浏览过

|

来源于php中文网

原创

本篇文章主要介绍html入门基础,感兴趣的朋友参考下,希望对大家有所帮助。

标记、标签、元素

标签和元素通常是描述同样的意思,但是严格来说,一个HTML元素包含了开始标签和结束标签。

一个标准的HTML页面

<!DOCTYPE html>  <!--声明了文档类型-->
<html>    <!--描述了文档类型-->
<head>    <!--可以插入<script>脚本,样式文件(css)以及各种meta信息
<meta http-equiv="content-type" content="text/html;charset="utf-8" />
<title>页面标题</title>
</head>
<body>    <!--可视化网页内容(文档的主体)</body>

常用标签

①HTML标题:

立即学习前端免费学习笔记(深入)”;

标题是通过

~

标签来定义的,h是"header"的缩写。h1是主标题,只能使用一次,h2是副标题,h3~h6一次递减字体大小。

②HTML段落:

段落是通过标签

来定义的,p是"paragraph"的缩写,经常被用来创建一个段落。

③HTML连接

链接是通过标签来定义的。a标签也叫archor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的内部导航功能。                                                                                                                                                            

href="网址导航"                                                                                                                                                                      target="_self":在当前页面进行跳转(默认)                                                                                                                          target="_blank":新开页面跳转

锚点:是文档中某行的一个记号,用于链接到文档中的某个位置。                                                                                            

定义锚点:                                                                                                                                    

链接到锚点: 回到顶部                                                                                                                   

 如果只写 默认回到页面顶部  

④HTML图像HTML入门基础

图像通过单标签HTML入门基础来定义。                                                                                                                                            

error                                                                                           

 src指“source”。源属性的值是图像的URL地址。                                                                                                                  

alt属性用来为图像定义一串预备的可替换的文本。                                                                                                                    

title属性可以让鼠标悬停在图像上时显示title内容(通常是图像标题)。

⑤特殊字符与标签  


标签可以进行换行操作   


标签可以定义水平线       空格     <

⑥HTML文本格式化

可以使用标签对输出的文本进行粗体或斜体转换。通常可以使用代替前者。然而,这些标签的含义不同:                                                                                                                                                                                    

定义粗体或斜体文本。                                                                                                                                            

意味着这段文本是重要的,所以要突出显示。                                                                                              

缩小文本                放大文本                                                                                                

下标                            上标                                                                                                        

保留文本里所有的空格和换行操作

对于HTML,无法通过在HTML代码中添加额外的空格和空行,所有连续的空格(换行)会被合并为一个。        

⑦HTML区块

HTML可以通过

将元素组合起来。大多数HTML元素被定义为块级元素或内联元素(行内元素)。

块级元素:独占一行,元素前后自动换行。例如:

    内联元素:在显示时通常不会以新行开始。例如:

    、@@##@@

    p是块级元素,它是可用于组合其他元素的容器。如果与CSS一同使用,p可用于对大的内容块设置样式属性。

    谷歌抖动窗口插件jquery-wobblewindow-plugin
    谷歌抖动窗口插件jquery-wobblewindow-plugin

    这是一款可以创建gooey效果抖动窗口的jquery插件。该gooey效果抖动窗口基于HTML5 canvas来制作,可以在鼠标移入和移出HTML元素时,为其边框制作波浪状的抖动效果。

    下载

    span是内联元素,可用于作为文本内容的容器。当与CSS一同使用时,span可用于为部分文本设置样式属性。

    ⑧HTML列表

    无序列表(unorderlist):此列项目使用粗体圆点进行标记。   

    @@######@@

    · Coffee
    · Milk

    有序列表(orderlist):此列项目使用数字进行标记。    

    @@######@@

    1.Coffee
    2.Milk

    自定义列表(definedlist):不仅仅是一列项目,而是项目及其注释的组合。

    @@######@@

    Coffee
    - black hot drink
    Milk
    - white cold drink

    ⑨HTML表格

    表格由

    标签来定义。每个表格均有若干行(tablerow),每行被分割为若干单元格(tabledata)。可以为表格指定width和height属性,如果不定义边框属性,表格将不显示边框。@@######@@

    在浏览器显示如下:

    @@##@@

    跨行和跨列的表格单元格

    @@######@@

    浏览器中显示如下:

    单元格跨两格:

    Name Telephone
    Bill Gates 555 77 854 555 77 855

    单元格跨两列:

    First Name: Bill Gates
    Telephone: 555 77 854
    555 77 855

     Cell spacing 增加单元格之间的距离

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

    HTML入门基础

    ⑩HTML表单

    表单是一个包含表单元素的区域。

    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

    表单使用表单标签

    来设置。

    多数情况下被用到的表单标签是输入标签()。

    输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

    文本域(Text Fields)

    文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

    浏览器显示如下:

    First name: 
    Last name: 

    注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

    密码字段

    密码字段通过标签 来定义:

    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>

    浏览器显示效果如下:

    Password: 

    注意:密码字段字符不会明文显示,而是以星号或圆点替代。

    单选按钮(Radio Buttons)

    标签定义了表单单选框选项

    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    浏览器显示效果如下:

    Male
    Female


    复选框(Checkboxes)

    <table border="1">
    <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
    </table>
    <h4>单元格跨两列:</h4>
    <table border="1">
    <tr>
      <th>First Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="2">Telephone:</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <td>555 77 855</td>
    </tr>
    </table>

    浏览器显示效果如下:

    I have a bike
    I have a car


    上传文件

    <h4>没有单元格间距:</h4>
    <table border="1">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>
    <h4>单元格间距="0":</h4>
    <table border="1" cellspacing="0">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>
    <h4>单元格间距="10":</h4>
    <table border="1" cellspacing="10">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>


    下拉列表/滚动列表

    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>

    文本域(Textarea)

    <form>
    Password: <input type="password" name="pwd">
    </form>


    Label标签

    label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    "for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

    <form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>

    带边框的表单(Fieldset)

    <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
    <form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
    </form>

    按钮

    普通按钮

    <input type="file" name="fileName" />

    提交按

    <form action="">
    <select name="cars" size=1>    <!--size=1时是下拉框,size>1时是滚动框-->
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
    </select>
    </form>

    重置按钮

    <textarea rows="10" cols="30">
    文本域只能通过rows和cols属性设置尺寸,如果文本内容超出限制会变成下拉框。
    </textarea>

    HTML5的button标签

    <form action="demo_form.phpp">
      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" value="male"><br>
      <label for="female">Female</label>
      <input type="radio" name="sex" id="female" value="female"><br><br>
      <input type="submit" value="提交">
    </form>

    在button元素内部可以放置内容,比如文本或图像。这是该元素与使用input元素创建按钮之间的不同之处。请始终为button元素规定type属性。

    相关推荐:

    HTML基础之选择器

    几个HTML基础知识点

    在前端中的html基础知识

    a1.png
    <form action="">
    <fieldset>
    <legend>Personal information:</legend>
    Name: <input type="text" size="30"><br>
    E-mail: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
    </fieldset>
    </form>
    <input type="button" value="按钮"/>    <!--自定义按钮,和JS关联,执行客户端脚本-->
    <input type="submit" value="提交"/>    <!--传送表单数据到服务器-->
    <input type="reset" value="重置"/>    <!--清空表单内容为最初默认值-->
    <button type="button">确认</button>

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

3

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

12

2026.03.03

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

69

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

59

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

46

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

24

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

20

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

4

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

348

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

AngularJS教程
AngularJS教程

共24课时 | 4万人学习

CSS教程
CSS教程

共754课时 | 39.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号