网站开发基础（一）

最新推荐文章于 2024-09-11 16:46:11 发布
最新推荐文章于 2024-09-11 16:46:11 发布
阅读量327 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iDestro/article/details/83057269
版权

常用标签

  • 如何进行段落换行
    这里展示两种，第一种新建一个行内标签<p>达到换行的效果，第二种是利用<br>进行换行，代码如下：
      
    <body>
    <h3>新建p标签换行</h3>
    <p>iDestro is very good!</p>
    <p>Of course!</p>


    <h3>利用br标签换行</h3>
    <p>
        iDestro is very good!
        <br> 
        Of course!
    </p>
</body>

    运行效果如下：


    可以发现<p>标签两行的默认间距比<br>的默认间距大得多，所以一般直接采用<br>标签来换行，且比较快。
  • 如何添加下划线
    直接使用<hr>标签即可，代码如下： 
    <body>
    <h3>生成水平线</h3>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
</body>

    运行效果如下：
     

     

  • 如何修改字体样式
    <font> 标签规定文本的字体外观、字体尺寸和字体颜色。不要使用该元素，请使用 CSS 向元素添加样式。
    <b>标签，给文字加粗。
    使用CSS样式直接修改字体样式：
    代码： 
    .describe {
  /*前面是字体族名称  最后一个是类族名称
  浏览器在显示字体的时候，依次判断是否支持当前的字体，知道最后的字体系列*/
  font-family: "仿宋","宋体",sans-serif;
  /*bold加粗  bolder深度加粗  lighter细体（100-900）*/
  font-weight: bold;
  /*font-size字体大小  取值：1、具体的px值  2、百分比（默认字体大小16px）*/
  font-size: 150%;
  /*font-style字体斜体*/
  font-style: italic;
  color: red;
  /*opacity 透明度（0是全透明）*/
  opacity: 1;
  font-size: 30px;
  /* line-height行高：单行字体占用的高度 */
  line-height: 45px;
  /*justify 两端对齐 left=start：左对齐（默认）right=end：右对齐 ceenter: 居中对齐*/
  text-align:justify;
  /*letter-spacing:控制字符间距（px normal）*/
  letter-spacing: normal;
  /*文本修饰  下划线underline  中划线line-through  上划线over*/
  text-decoration: none;
  /*三者配合使用：不换行，以...的形式显示
  (三个属性配合使用实现单行超出文本隐藏)*/
  /*overflow: hidden;  !*处理超出显示屏的内容隐藏*!
  white-space: nowrap;  !*不换行*!
  text-overflow: ellipsis; !*截取还是以...的方式显示*!*/
  /*文本阴影颜色  x方向的偏移 y方向的偏移  阴影的颜色*/
  text-shadow: 2px 2px #f2e78d;
  /*文本描边 描边的宽度  描边的颜色*/
  -webkit-text-stroke: 2px #ff7292;
  /*首行缩进*/
  /*em：相对的字符单位（2倍的字体大小）*/
  text-indent: 2em;
}

    运行的效果：
     

     

  • 如何在网页中显示一张表格
    <table> 标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

    在 HTML 4.01 中，不赞成使用 "align" 和 "bgcolor" 属性。
    在 HTML 5 中，不支持 <table> 标签的任何属性。
    1.简单表格样例
    代码：

    <table border="1px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

    效果：


    2.表格中的标题
    代码：

    <table border="1px">
    <tr>
        <th>Q</th>
        <th>E</th>
        <th>R</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

    效果：
     

    3.带有标题的表格
    代码：
     

    <table border="1px">
    <caption>iDestro</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

    效果：
     

    4.空单元格
    代码：

    <table border="1px">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

    效果：
     

    5.跨行或跨列的单元格
    代码：
     

    <table border="1px">
    <tr>
        <td rowspan="3">iDestro</td>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

    效果：
     

    6.表格嵌套
     

    <table border="1px">
    <tr>
        <td>
            <table border="1px">
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>一</td>
        <td>二</td>
    </tr>
</table>

    效果：
     

    7.单元格填充(Cell padding)
     

    <!-- 没有设置cellpadding -->
<table border="1px">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
        <td>four</td>
    </tr>
</table>

<br>
<br>
<br>

<!-- 设置了cellpadding -->
<table border="1px" cellpadding="8px">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
        <td>four</td>
    </tr>
</table>

    效果：
     

    8.单元格间距(Cell spacing)
     

    <!-- 没有设置了cellspacing -->
<table border="1px">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
        <td>four</td>
    </tr>
</table>

<br>

<!-- 设置了cellspacing -->
<table border="1px" cellspacing="10px">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
        <td>four</td>
    </tr>
</table>

    效果：
     

     

  • input标签
    <input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    1.文本域(Text fields)
    代码： 
    <form action="">
    姓：<input type="text" name="firstname">
    <br>
    名：<input type="text" name="lastname">
</form>
    效果：


    2.密码域
    代码： 
    <form action="">
    账号：
    <input type="text" name="user_name">
    <br>
    密码：
    <input type="password" name="pwd">
</form>
    效果：

    3.复选框
    代码： 
    <form action="">
    我喜欢自行车
    <input type="checkbox" name="bike">
    <br>
    我喜欢汽车
    <input type="checkbox" name="car">
</form>

    效果：
     

    4.单选按钮
    代码：
     

    <form action="">
    男性:
    <input type="radio" name="sex" checked="checked" value="male">
    <br>
    女性:
    <input type="radio" name="sex" value="female">
</form>

    效果：
     

    5.简单的下拉列表
    代码：
     

    <form action="">
    <select name="" id="">
        <option value="volvo">Volve</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

    效果：
     

    6.文本域（textarea）
    代码：
     

    <form action="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>

    效果：


    7.创建按钮
    代码：
     

    <form action="">
    <input type="button" value="Hello world">
</form>

    效果：
     

    8.围绕的Fieldset
    代码：
     

    <form action="">
    <fieldset>
        <legend>健康信息</legend>
        身高：<input type="text">
        <br>
        体重：<input type="text">
    </fieldset>
</form>

    效果：
     

    9.带有输入框和确认按钮的表单
    代码：
     

    <form action="">
    First name: <br>
    <input type="text" name="firstname" value="Mickey">
    <br> Last name: <br>
    <input type="text" name="lastname" value="Mouse">
    <br>
    <input type="submit" value="Submit">
</form>

    效果：
     

     

客户机和服务器之间进行请求-响应

  • GET
  • POST
  • 区别
彼年旧影
关注
web前端开发基础教程一
m0_64365419的博客
09-26 9680
简单的来说，en就是英文网页，zh-CN就是中文网页。但这并不意味着，我们一旦定义好语言，就不能在其中书写别的语言了，只是说为了展现当前页面的语言而已。那么它的作用就体现在，假如说当前的页面使我们不熟悉的语言，那么我们可以进行翻译。
Python Web开发基础
weixin_45906989的博客
07-21 4632
Python Web开发基础
公司网站开发基础版本
02-25
这个是我为我们公司用bootstrap框架+SSH做的小型的网站。
网站开发基础知识
wanglitao_hd的博客
01-13 352
网站开发基础知识
第一章 网页制作的基础知识
最新发布
2301_81614658的博客
09-11 993
1.1—1.6，概念论述，带你了解网页 1.6—1.9，案例呈现，做第一个网页
动态网页跟静态网页有什么区别 ？
qq_38576058的博客
05-15 815
二者的区别：静态网页1、静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；2、网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；3、静态网页的内容相对稳定，因此容易被搜索引擎检索；4、静态网页没有数据库的支...
web开发基础知识
vision666的博客
02-27 9301
web开发基础知识学习 一、网页开发三剑客 ​ 我们看到的网页通过代码来实现的 ，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。 这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。写网页的代码是专门的语言， 主要分为Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，分别作用如下： Html：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。主要负责编写页面架构，有点像建房子时
网页开发基础
qq_64505257的博客
06-01 3682
网页开发基础
ASP.NET 4.0 网站开发与项目实战 光盘
02-22
在“ASP.NET 4.0 网站开发与项目实战”光盘中，我们可以期待学习到以下核心知识点： 1. **ASP.NET 4.0基础知识**：理解ASP.NET 4.0的新特性，如改进的页面生命周期管理、更高效的缓存机制、增强的MVC（Model-View-...
开发一个商城需要多少钱 做一个电商网站大概多少钱
miao_han_yun的博客
08-09 4537
　　首先要考虑做电脑版、微信版，还是做电脑版+手机版，或者要做APP，我们来分析一下这些差异。　　只做电脑版：可采用成熟的方案如：ecshop(官网商业授权7800元，源代码开源)，注意！这里只是授权费，不包括任何服务，如域名.空间.程序搭建.图片处理.产品输入，支付界面配置均无！　　只做微信版:可以用有赞微商城的基础版(年费4800元，没有源代码)注意！每年需要交4800元！同样，不包括任何服务，所有设置，包括图片.产品数据需要花很多时间输入数据！　　电脑+手机版：当然，我希望数据交换，没有人愿意做同样的
零基础入门微信小程序开发
热门推荐
GitChat
07-03 34万+
本课程是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。
网站开发源代码(已发布过)
12-25
采用MVC设计模式，主要技术有J2EE 页面采用CSS+HTNL+javascript 所有发送请求都是采用AJAX 只要安装了tomcat就可以用
网站开发基础知识来啦~
h083417172_的博客
12-11 339
互联网的访问过程 浏览器与服务器 服务器是提供内容信息的计算机 浏览器是访问者用于浏览网页的软件 www与万维网 WWW、万维网和Web是同义词，是一个大型的由相互链接的文件所组成的集合体。 一个完整的WWW系统包括服务器、浏览器、HTML文件和网络。 浏览器向服务器发出对某个站点的请求，服务器接收到请求之后，发送响应给浏览器，浏览器显示出文件内容。 网站制作好之后，需要把网站传送到远程服务器上，这就要用到FTP服务，不属于WWW的范畴。 IP地址和域名 IP地址是识别互联网上计算机和网络设备的标
网站开发相关基础知识点重拾（持续更新中）
晓风残月xj
10-23 683
1、代理 代理服务器的工作机制很象我们生活中常常提及的代理商，假设你的机器为A机，你想获得的数据由B机提供，代理服务器为C机，那么具体的连接过程是这样的。 首先，A机需要B机的数据，它与C机建立连接，C机接收到A机的数据请求后，与B机建立连接，下载A机所请求的B机上的数据到本地，再将此数据发送至A机，完成代理任务。 2、VPN 虚拟专用网络，主要功能在公用网络上建立专用网络，进行加密通讯。在企业网络中有广泛应用。VPN网关通过对数据包的加密和数据包目标地址的转换实现远程访问
网站开发基础知识篇 一HTML及相关标签
ProfeSir的博客
07-25 623
刚开始学网页开发，把基础知识总结一下，如有错误，请指正。我会按照我的学习路线，依次更新博客。 本文读者为和我一样想学习web编程的初学者，写此博客初衷一是巩固所学知识，二是锻炼思维，书写能力，三是分享经验，如果能广交天下好友，那是最好了。
关于网站开发的基础知识、Web开发需要学哪些知识、Web入门
qq_41862555的博客
08-09 1280
关于网站的一些常识，网站开发，网站开发需要学哪些东西，域名、URL、网站名，网站开发入门的一些知识
Day01_网页开发基础知识、HTML概述、HTML标签
dushine2008的博客
01-09 361
01.01_网页开发基础知识 代码编写工具 python PyCharm Subline iPython。。。 HTML HBulider Dreamweaver WebStorm Eclipse。。。 网页内容 html head 设置信息 title 标题 script 引入JavaScript代码 link 引入css样式表 meta 说明/配置 。。。 body ...
网站开发基础知识篇二 JavaScript知识点
ProfeSir的博客
07-26 428
"应该说它是一门非常简单的语言，又是一门非常复杂的语言，说它简单，是因为学会它只需片刻功夫；而说他复杂，是因为要真正掌握它需要数年时间"。（引自《JavaScript高级程序设计》）。因为此前已经掌握了不少高级语言，这篇主要记录Js的特点和知识点。 1.Js是一种弱类型，解释执行的语言。    弱类型是说它的数据类型不像C/C++那样有严格的short,int ,long,double,cha
菜鸟学网站开发入门之（一）—— html 入门
JosenChina的博客
07-28 5179
什么是html？html就是符合HTML（超文本标记语言）语法一类特殊的内容 小白阶段可以把它理解为符合某种特殊语法的字符串，并且它是存放在以“.html”后缀结尾的文件中的，当服务端向客户端发送一个后缀名为“.html”的文件时，浏览器就会根据这个文件的内容将这个html页面渲染成它所要表达的画面。这里我只讲部分html的实现原理，只涉及部分html语法，想具体学习html还需另找教程。在“菜...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值