HTML总结——页面内容的表现

最新推荐文章于 2024-08-04 14:23:51 发布
最新推荐文章于 2024-08-04 14:23:51 发布
阅读量2.5k 收藏 12
点赞数 1
分类专栏： 前端---HTML+CSS+JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzheweini/article/details/83030068
版权

一、HTML的基本结构

<html>

        <head> </head>//内含：<title><meta><link><style><script><base>等结构

        <body></body>//内含：段落与文字、列表、表格、图像、超链接、表单、多媒体、框架等结构

</html>

二、文本标签

       1、结构化标记

       <h1>~<h6>标题、<p>段落、<br />换行符、<hr />水平线

       <b>粗体、<i>斜体、<sup>上标、<sub>下标、<big>大字号标签、<small>小字号标签、特殊符号等

       2、语义化标记

       <strong>加粗、<em>强调、<blockquote>长引用、<q>短引用、<abbr>缩写字、<acronym>首字母缩写词

       <cite>引用、<dfn>定义术语、<address>设计者联系详情、<ins>用来显示已经插入到文档中的内容（有下划线）

       <del>带有删除线（已经应该删除的文本、词语）、<s>带有删除线（价格）、<u>下划线标签

三、列表

       有序列表：<ol type="a">、<li> //type属性：1,a,A,i,I

       无序列表：<ul>、<li>  //type属性：disc、circle、square

       定义列表：<dl>、<dt>术语、<dd>定义

       应用：可嵌套列表

四、链接

       常用：<a href="目标地址">text</a>     //目标地址可为url（不同网站）、html文件（同一网站内部）

       Email链接：<a href="mailto:hahaha@163.com">text</a>

       target属性：target="_black"    // 作用：在新窗口打开链接

       链接到页面某个位置：href="#top"

五、图像

     

 <img src="images/quokka.jpg" alt="A family of quokka" width="600" height="450">

       src：图像路径；alt：对图像的文本说明；title：图像的附加信息；width、height:图像的宽度和高度   

       旧代码中：align：left图像置左；right：图像置右；top\middle\bottom：将图像与它周围文本的对齐方式

       图像格式：JPEG、GIF动画、PNG

       HTML5中的图像：<figure>图像标签、<figcaption>图像说明

            exp：<figure><img src="*.jpg" ><figcaption>说明</figcaption></figure>

六、表格

       1、表格       

<table>

       <caption>表格标题</caption>

       <tr><th>标题1</th><th>标题2</th></tr>

       <tr><td>内容1</td><td>内容2</td></tr>

</table>

       跨列：<td colspan="2" rowspan="2">内容1</td>

        2、长表格     

 <table>
        <thead>
               <tr>
                   <th>列标题</th>
                   <th></th>
               </tr>
        </thead>
        <tbody>
               <tr>
                   <th>行标题</th>
                   <td></td>
               </tr>
        </tbody>
        <tfoot>
              <tr>
                  <td></td>
                  <td></td>
              </tr>
        </tfoot>
</table>

宽度和间隔：<table width="400px" cellpadding="10" cellspacing="5" ></table>

边框和背景：<table border="2" bgcolor="#efefef" ></table>

七、表单

        1、表单的结构

<form action="URL" method="get/post"></form>

              action属性：服务器上一个页面的URL。method：表单的提交方法。

              常用控件：

              单行文本框：

<input type="text" name="username" size="15" maxlength="30"/>

                                size在旧表单中使用，用于制定文本宽度（可见字符数量）、maxlength限制用户在文本区域输入字符的数量

              密码框：

<input type="password" name="password" size="15" maxlength="30">

              文本域：

<textarea name="comments" cols="20" rows="4"></textarea>

                           cols用于指定文本域有多宽，rows指定文本域在纵向上占据的行数

             单选按钮：

<input type="radio" name="genre" value="rock" checked="checked"/>

             复选框：

<input type="checkbox" name="service" value="itunes" checked="checked" />

             下拉列表：

<select name="devices">
    <option value="ipad">ipad</option>
    <option value="radio">radio</option>
</select>

             下拉列表也有selected选项             

             多选框：

<select name="instruments" size="3" multiple="multiple">
    <option value="guitar" selected="selected">Guitar</option>
    <option value="drums">Drums</option>
</select>

          multiple可允许用户从列表中方选择多个选项             

          文件上传域：

<input type="file" name="user-song" />
<input type="submit" value="Upload" />

              表单按钮：

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>

              提交按钮：

<input type="submit" name="subscribe" value="Subscribe"/>

              图像作为提交按钮：

<input type="image" src="images/subscribe.jpg" width="100" height="20"> 

              按钮：

<button><img src="" alt="" width="" height=""/></button>//可以将图像作为按钮

              隐藏控件：

<input type="hidden" name="bookmark" value="lyrics"/>

              标签表单控件：

<label>Age：<input type="text" name="age" /></label><br/>
    Gender:<input id="female" type="radio" name="gender" value="f">
    <label for="female">Female</label>
    <label id="male" type="radio" name="gender" value="m">
    <label for="male">Male</label>

             for属性用来说明标签控件用来标注的是哪个表单控件             

            组合表单元素：

<fieldset>
    <legend></legend>
    <label></label>
</fieldset>

            HTML5表单验证：required属性值

<input type="text" name="username" required="required"/>

             HTML5日期控件：type="date"

 <input type="date" name="depart"/>

             HTML5电子邮件和URL控件：type="email"，type="url"                                         

<input type="url" name="website"/>
<input type="email" name="email"> 

             HTML5搜索输入控件：type="search"，placeholder

 <input type="search" name="search" placeholder="Enter keyword"/>

              其他标记：<div><span>

                             内联框架：

<iframe width="450" height="350" src=""></iframe>

                             html4：scrolling、frameborder

                            html5：seamless应用在不需要滚动条的地方             

             页面信息 

<meta name="description/keywords/robots" content="a text words">
<meta http-equiv="author/robots/pragma/expries" content="Fri,04 Apr...">

                              description:页面描述信息，keywords：关键词，robots：是否将页面加入搜索引擎的搜索结果

                              author:定义网页设计者，pragma：防止浏览器对页面的缓存，expries：制定页面过期时间

八、Flash、视频和音频

      1、音频：

<embed src="media/青花瓷.mp3" width="400px" height="80px"/>

      2、视频：

<embed src="media/小苹果.wmv" width="400px" height="80px"/>

      3、flash动画：

<embed src="App_images/lesson/hj/helloworld.swf"/>

九、浮动框架iframe

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>

 

wangzheweini
关注
专栏目录
HTML学习框架总结
gxflh的博客
12-04 167
第一课：HTML语言框架和相关标签 8 1-1 学习html的前提和必要性 47177 1-2 什么是HTML 28769 1-3 HTML语言的整体框架1 30899 1-4 HTML语言的整体框架2 27330 1-5 行标签和段标签 25272 1-6 文字属性标签 24590 1-7 文字格式化标签 22689 1-8 body标签 23079 1-9 标题标签 21099 第二课：常用标签代码 0 2-1 图片 32959 2-2 超链接1 ...
HTML基础总结
XGamer
10-02 2059
===============================             第一章    HTML基础         =============================== HTML是网页超文本标记语言，属于一种描述性的标记语言。 HTML的文件都是以后缀名.html命名的。 HTML的基本框架                        
HTML标签总结
最新发布
fox22106的博客
08-04 353
一、基本骨架1、head：网页头部，用来存放给浏览器看的信息，例如CSS2、title：网页标题3、body：网页主体，用来存放给用户看的信息，例如图片、文字二、标签1、标题标签：h1 ~ h6（双标签）文字加粗字号逐渐减小独占一行（换行2、段落标签：p（双标签）独占一行段落之间存在间隙3、换行与水平线标签换行：单标签水平线：单标签。
HTML页面小总结
weixin_44567226的博客
06-18 179
开发工具与关键技术：Dreamweaver，HTML 作者：李建威 撰写时间：2019年06月17日 本文献运用到的JQuery和图片，请自行引用： <!doctype html> <html> <head> <meta name="viewport" content="width=device-width user-scalable=0" /&...
html（网页）总结
Bugxiu_fu的博客
03-01 161
第一课:HTML（网页基本） 常用标签： br、hr、font 、h1-h6、p、ul、ol、img、marquee（走动文字）... ​ 超链接<a>： 1.属性href：超链接地址 2.属性:target：跳转模式-- _blank:新窗口 _self: 本窗口（默认） <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
HTML页面内容
H U C
03-16 758
转载出自：http://www.w3cschool.cn/html/html-css-content.html 介绍了  article、hgroup、section、nav、details、summary、aside、headers、footers等标签
页面——CSS+html
11-21
总结起来，“页面——CSS+html”的组合是构建个人联系页面的核心，HTML负责内容结构，CSS则负责视觉表现和交互体验。通过熟练掌握这两者，开发者可以创造出既实用又美观的个人联系页面，满足用户需求，提升网页品质...
HTML网页设计结课作业——基于HTML+CSS仿学校官网页面
08-10
4. **多媒体元素丰富**：页面中包含多媒体元素，增强了页面的表现力。 综上所述，该HTML网页设计结课作业通过实践的方式让学生掌握了HTML、CSS及简单JavaScript的应用，并能够独立完成一个功能完善、界面美观的网页...
HTML5学习笔记（总结提炼版）——001
03-14
HTML5是现代网页开发的核心，它是超文本标记语言HTML的第五...以上就是对HTML5学习笔记的初步总结，涵盖了HTML5的关键特性、常见标签以及编码的最佳实践。深入理解和掌握这些知识，将有助于成为一名熟练的前端开发者。
使用HTML+CSS实现一个静态页面——面包蛋糕 (9页)
08-10
根据提供的文件信息，我们可以总结出以下几个关键的知识点： ### 1. HTML5+CSS静态页面设计的基本概念 - **HTML5**: 是一种用于构建网页的标准标记语言，它提供了丰富的元素来帮助开发者创建更加动态和交互式的...
html+css基础学习教程标记语言——为指定样式
01-08
HTML 和 CSS 是构建网页的基本工具，它们分别负责网页的内容结构和视觉表现。在本章“为指定样式”的学习中，我们将深入理解如何利用 CSS 的灵活性和控制力来实现页面布局的高效管理。 首先，内容与样式的分离是...
html课程总结，accphtml课程总结。
11-25
html课程总结，accphtml课程总结。html课程总结，accphtml课程总结。html课程总结，accphtml课程总结。
关于html页面知识点总结
qq_39194067的博客
11-12 237
<!DOCTYPE html> <html lang="en"> Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。此处加上html 是为了声明此文件为HTML文件 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。&lt...
html总结
wen_special的博客
04-07 498
HTML教程HTML教程 HTML标题 html标题是通过h标签来定义的 HTML段落 html 段落是通过p标签来定义的 HTML链接 html链接是通过a标签来定义的 HTML图像 html图像是通过标签来定义的 关于HTML的其它方面 marquee设置滚动效果 marquee基本语法 标签属性 其它 创建基本超链接 链接a在html中既可作为一个跳转其他页面的链接也可以作为埋设在文档中某处的
页面内容
kstudyk的博客
01-17 422
文件编码 <%@ page contentType="text/html; charset=GBK" pageEncoding="GBK"%> pageEncoding是jsp文件本身的编码 页面响应类型 ContentType 属性指定响应的 HTTP 内容类型。 如果未指定 ContentType，默认为 text/HTML。 　　 语法　　Response.ContentTyp...
HTML框架的总结
QQ89697761的专栏
04-20 528
<br /><br /> <br />自定义一个框架：<br /> <br /><frameset rows="10%,*,10%" frameborder="0"><br /><frame src="top.html" name="top" noresize="noresize"/><br />    <frameset cols="20%,*"><br />        <frame src="left.html"  name="left" noresize="noresize" scrolling=
做页面的总结
weixin_34038652的博客
04-03 53
1,在调用jQuery里面的东西时,必须要起始函数 2,建数据库时,尽量少用外键,用联合查询 3,尽量少让程序执行多次加载(ajax) 4,绑定事件要在起始函数之外 5,在页面中可以多用方法绑值(<%=GetList()%>) 6,在母版页中用ajax,其他页面在一个文件之下,那么母版页也要建在文件夹之下,这样才能保证ajax请求路径对(之一) 转载于...
html知识点框架总结
qq_45555960的博客
08-23 175
html 概念 核心 主体结构 <!doctype html> html head body meta 设置字符集，放在head标签的第一行 title网页标题 常用的标签 功能性标签 超链接 表格 表单 iframe 列表 无序l列表 有序列表 自定义列表 图片 辅助性标签 b ...
html页面内容分页
09-17 626
      上网看新闻或是资料时，经常看到有些文章内容分页。非常好奇其实现方法。今天在网上淘到一个非常棒的用javasript给页面内容分页的例子。看下效果吧   ：下面是代码，大家可以研究一些，非常不错的javascript代码：  1DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  2html>  3head> 
HTML+CSS：打造美观与实用并重的静态网页设计指南
它能有效传递页面信息，增强页面的视觉吸引力，突出主题内容，帮助用户快速理解页面的核心内容。此外，一个精心设计的CSS布局和样式可以使网站看起来专业，提高用户的满意度，从而带来更好的用户体验。 接着，资源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值