网站开发综合技术 HTML

news/2024/5/8 20:40:38/文章来源:https://blog.csdn.net/weixin_34195546/article/details/93782708

HTML            内容(Hyper Text Markup Language,超文本标记语言)

CSS             网页美化

Javascript      脚本语言

第一部分 HTML

<html>    --开始标签

    <head>

        网页上的控制信息

     <title>页面标题</title>

    </head>

    <body>

        页面显示的内容

    </body>

</html>    --结束标签

 

    <!--注释内容--> 注释

body的属性:

    bgcolor                 页面背景色

    text                    文字颜色

    topmargin               上页边距

    leftmargin              左页边距

    rightmargin             右页边距

    bottomargin             下页边距

background              背景壁纸

1.1、一般标签

1.1.1、格式控制标签

    <font color="" face="" size=""></font>          控制字体;color="##FF0000";face,字体;size,字体大小。

    <b></b>                 字体加粗

    <i></i>                 倾斜

    <u></u>                 下划线

    <strong></strong>       字体加粗(强调,语气加强用)

    <em></em>               字体倾斜(强调,语气加强用)

    <center></center>       居中

    <br> 或<br />           相当于回车

&nbsp;                 表示空格 也可以在设计页面中按ctrl+shift+space

 

1.1.2、内容容器标签

    <h1></h1>……<h6></h6>  标题(会自动换行)。HTML标题(Heading)是通过<h1> - <h6> 等标签进行定义的。

    <p></p>                 段落标签(段落之间空行)

    <div></div>             层标签(默认占一行)

    <span></span>           层标签(默认用多大空间占多大空间)

 

    <ol type="1">    --有序列表,序号为1,2,3……,引号中可以更改序号形式

        <li>内容</li>

        <li>内容</li>

    </ol>    --上面“ol”改为“ul”则为无序列表

 

“../”    表示上级目录

“./”     表示当前目录

相对路径:从当前页面开始查找。

绝对路径:从网站的根开始查找。  “/”,代表网站的根。 

 

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

详细内容参阅:http://www.w3school.com.cn/

 

例:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-        transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>网页标签</title>

    </head>

    <body>

    <font color="#0066FF" face="华文新魏" size="5">字体控制</font> <!--注释--><br>

    <b>字体加粗</b> <br>

    <i>倾斜</i> <br>

    <u>下划线</u> <br>

    <strong>加粗</strong> <br>

    <em>倾斜</em> <br>

    <center>居中</center> <br>

    回<br>车 <br>

    空&nbsp;格 <br>

    <br>

    <br>

 

    <h1>标题1</h1>

    <h2>标题2</h2>

 

    <h6>标题6</h6>

    <p>段落1</p>

    <p>段落<br>

    2</p>

 

    <font>第一种<div>层标签</div></font>

    <font>第二种<span>层标签</span></font>

 

    <ol type="a">有序列表

         <li>序号1</li>

         <li>序号2</li>

         <li>序号3</li>

    </ol>

 

    <ul type="circle">无序列表

         <li>第一</li>

         <li>第二</li>

         <li>第三</li>

    </ul>

    <a href="http://www.w3school.com.cn">This is a link</a>

    </body>

    </html>

显示如下:

 

1.2、常用标签

超链接标签

    <a href="超链接地址" target=“_blank”>超链接的文字</a>     --href(hyperlink reference);_blank是在新窗口打开。

    第一步:做锚点的标签。<a name=""></a>

第二步:做锚点链接。<a href="目标链接的name的值"></a>

 

图片标签

    <img src="图片地址" alt="文字" width="" height="" />     --高跟宽设置一个即可,显示图片会按比例缩放。alt在图片无法加载时,显示文字,还可帮助搜索引擎搜索。

1.3、表格与表单

1.3.1、表格

    <table></table> 表格

        width:宽度。可以用像素或百分比表示。常用960像素。

        border:边框。常用值0。

        cellpadding:内容跟单元格边框的边距。常用值0。

        cellspacing:单元格之间的间距。常用值0。

        align:对齐方式。

        bgcolor:背景色。

        background:背景图片。

 

    <tr></tr> 行

        align:一行的内容的水平对齐方式

        valign:一行的内容的垂直对齐方式

        height:行高

        bgcolor:背景色

        background:背景图片

 

    <td></td> 单元格

    <th></th> 表头,单元格的内容自动居中、加粗

        align:单元格的内容的对齐方式

        valign:单元格的内容的垂直对齐方式

        width:单元格宽度

        height:单元格高度

        bgcolor:背景色

        background:背景图片

    内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。设置单元格行高、列高时,会同时影响对应的行或列

    单元格合并:(建议尽量用表格嵌套)

        colspan="n"    合并同一行单元格(后面写代码要减去相对应的列) 

        rowspan="n"    合并同一列单元格(从第二行开始减去对应的列)

 

转载于:https://www.cnblogs.com/dreamer666/p/5655893.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_767068.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站安装打包 修改app.config[六]

2019独角兽企业重金招聘Python工程师标准>>> 在winform的安装工具中&#xff0c;少不免有一些配置文件要放到app.config去&#xff0c;于是修改也是成了一种需求&#xff01; 无论是修改web.config还是app.config&#xff0c;普遍方式都有两种&#xff0c;用net自带…

如何在网站中加入百度统计

原文&#xff1a;http://jingyan.baidu.com/article/f96699bb92dce9894e3c1b8b.html 可能有部分新站长不太了解如何在自己的网站中加入百度统计。现在我用图文并茂的形式交大家方法。希望能够用得上。 工具/原料 网络电脑方法/步骤 首先打开百度首页&#xff0c;点击下图中红色…

JavaWeb学习笔记11——MVC新闻网站开发

目录 一、项目结构描述 二、截图 三、关键代码 四、总结 一、项目结构描述 GoPage.java&#xff0c;这是项目的入口&#xff0c;它的最终目的是打开一个页面&#xff0c;新闻首页或者管理员登陆后的后台管理页面。它的任务是获取所有新闻并存入链表&#xff0c;并将新闻链表…

《Splunk智能运维实战》——2.5 找出浏览量来源最多的网站

本节书摘来自华章计算机《Splunk智能运维实战》一书中的第2章&#xff0c;第2.5节&#xff0c;作者 [美]乔史戴昆&#xff08;Josh Diakun&#xff09;&#xff0c;保罗R.约翰逊&#xff08;Paul R. Johnson&#xff09;&#xff0c;德莱克默克&#xff08;Derek Mock&#xff…

c++ _mkdir无法创建文件夹_五步助力运维迅速创建网站备份!

创建网站备份应该是一个网站管理员最为重要的日常工作之一。但现实情况是&#xff0c;备份这一步往往被很多人忽略&#xff0c;也就是说仍然有很多网管的网站安全意识较低。所有的Linux/Mac用户都能够零经济成本地通过命令行工具创建网站备份。本文的初衷不是为读者提供完整的备…

php无法访问_php网站无法访问可能是什么原因

php网站无法访问的原因可能是&#xff1a;1、php版本过低&#xff0c;如【require php>5.3.0】&#xff0c;此时更换php到更高版本即可&#xff1b;2、数据库错误&#xff0c;此时需要检验数据库账号和用户名是否正确&#xff1b;3、网页的URL失效&#xff0c;此时重新部署程…

MVC 如何在action中获取当前网站的根路径

如果基于MVC搭建的网站在IIS发布的是一个单独的端口&#xff0c;那么可以直接通过后面语句获得跟路径&#xff1a;Request.Url.GetLeftPart(UriPartial.Authority).ToString(); 较完整的获取url传送 但往往我们的网站是作为一个子“应用程序”来发布的&#xff0c;可能如下&…

最牛程序员最爱逛的10大编程网站,你知道几个?

今天我给大家推荐10个高级程序员经常逛的网站&#xff0c;你又去过几个呢&#xff1f;来跟着小编一起看看都有哪些牛逼的网站吧。 分享之前我还是要推荐下我自己的前端学习群&#xff1a;653415492&#xff0c;不管你是小白还是大牛&#xff0c;小编我都挺欢迎&#xff0c;不定…

开发大型高负载类网站应用的几个要点

作者&#xff1a; nightsailer 来源&#xff1a; http://www.phpchina.com/bbs/thread-15484-1-1.html看了一些人的所谓大型项目的方法,我感觉都是没有说到点子上&#xff0c;有点难受。 我也说说自己的看法.我个人认为,很难衡量所谓项目是否大型, 即便很简单的应用在高负载和…

你应该知道的关于SEO和Javascript的6个事实

你应该知道的关于SEO和Javascript的6个事实 了解JavaScript的基础知识已成为SEO专家的一项重要技能&#xff0c;尽管到目前为止&#xff0c;这两个学科之间的关系一直存在争议。 关于SEO和JavaScript的关键问题是发现搜索引擎机器人是否可以正确地感知网站内容并实际评估用户体…

程序员常用的技术网站(http://bbs.jointforce.com/topic/17717)

文章转自《http://bbs.jointforce.com/topic/17717》&#xff0c;多谢分享&#xff01; ----------------------------------------------------------------------------- 作为一个每天都泡在电脑面前的程序员来说&#xff0c;选对一些学习的地方、和大家交流的地方就显得尤…

浅谈Web网站架构演变过程及各阶段所用的技术和架构设计

2019独角兽企业重金招聘Python工程师标准>>> 前言 我们以javaweb为例&#xff0c;来搭建一个简单的电商系统&#xff0c;看看这个系统可以如何一步步演变。 该系统具备的功能&#xff1a; 用户模块&#xff1a;用户注册和管理商品模块&#xff1a;商品展示和管理交易…

推荐5款不为人知的网站!竟如此好用,不收藏下来真的可惜了!

网站是每一个人必不可少的资源&#xff0c;如果你有了一份好的资源&#xff0c;你的效率也会大大提升&#xff0c;下面推荐的5款网站&#xff0c;希望你们能够喜欢&#xff01; 1.创造狮推荐5款不为人知的网站&#xff01;竟如此好用&#xff0c;不收藏下来真的可惜了&#xff…

大型网站架构演变和知识体系

微博上看到的一张图&#xff0c;很形象。之前看过一个淘宝网负责技术的一个主管在某技术交流会上介绍的淘宝的的三代架构发展过程&#xff0c;也是像这样的一步步走过。特此分享。

使用.net core基于Razor Pages开发网站一些工作笔记

本文是在实践工作中遇到的一些问题记录&#xff0c;并给出是如何解决的&#xff0c;.net core已经升级到3.0版本了&#xff0c;其实在项目中很早就已经在使用.net core来开发后台接口了&#xff0c;正好有个网站项目&#xff0c;就使用了Razor Pages来开发&#xff0c;从体验上…

java程序员菜鸟进阶(八)分享一个爬取B2B网站信息的程序

前段时间&#xff0c;女朋友如愿以偿的找到了销售的工作&#xff0c;第一天正式上班还挺高兴&#xff0c;第二天就开始愁眉苦脸了。就是因为他这销售实在是太麻烦&#xff0c;以后每天要到一些B2B网站去找一些客户信息&#xff0c;每天要找几百条&#xff0c;刚开始我还安慰的说…

推荐一个源代码浏览网站

原文&#xff1a; http://www.linuxers.cn/2010/04/23/%E6%8E%A8%E8%8D%90%E4%B8%80%E4%B8%AA%E6%BA%90%E4%BB%A3%E7%A0%81%E6%B5%8F%E8%A7%88%E7%BD%91%E7%AB%99/ 今天在逛水木linux dev版的时候发现了一个不错的网站&#xff0c;www.sooset.com &#xff0c;它可以提供在线…

[转贴] 著名社交网站LinkedIn的Java架构技术

在JavaOne 2008的会议上&#xff0c;著名社交网站LinkedIn的开发者做了2个关于LinkedIn网站的架构技术的演讲&#xff0c;目前这两个演讲的PPT已经可以下载了。下载地址如下&#xff1a; LinkedIn - A Professional Social Network Built with Java™ Technologies and Agile …

Android 开发者福利Google Developers中国网站发布

今天一早就听到各大QQ群&#xff0c;好友说Google 发布中国站点了&#xff0c;迫不及待的查看了究竟。 摘自原文 谷歌开发者公众号 我们很高兴地宣布&#xff0c;Google Developers 中国网站 (developers.google.cn) 正式发布&#xff01; 谷歌自带中文翻译&#xff0c;让我们…

网站原生app服务器安装环境,Websphere环境搭建及应用部署

3) 启动报错&#xff1a; SRVE0293E: [Servlet错误]-[null]: com.ibm.ws.webcontainer.webapp.WebAppErrorReport报错信息&#xff1a;[13-4-9 17:23:42:960 CST] 0000002d webapp E com.ibm.ws.webcontainer.webapp.WebApp logError SRVE0293E: [Servlet错误]-[null]: com.ibm…