web基础(第一期——HTML语法介绍上)

39 篇文章 0 订阅
7 篇文章 0 订阅
前言:我我我又来啦!!!今天更HTML,啊!我好累,好难受。。。正文:网站知识介绍:网络系统软件开发包括两种结构:C/S是客户机(client)/服务器(Server)B/S是浏览器(browser)/服务器B/S优劣:1.维护升级方式简单2.成本低,选择多3.应用服务器运行数据负荷严重动态网站:动态网站并不是指具有动画功能的网站,而是指网站内容可根据不同情况动态变更的网站,一般情况下动态网站通过数据库进行架构。 动态网站除了要设计网页外,还要通过 数据库 和 编程序 来使网站具有
摘要由CSDN通过智能技术生成

前言:

我我我又来啦!!!今天更HTML,啊!我好累,好难受。。。
在这里插入图片描述

正文:

网站知识介绍:
网络系统软件开发包括两种结构:
C/S是客户机(client)/服务器(Server)
B/S是浏览器(browser)/服务器
B/S优劣:
1.维护升级方式简单
2.成本低,选择多
3.应用服务器运行数据负荷严重
动态网站:
动态网站并不是指具有动画功能的网站,而是指网站内容可根据不同情况动态变更的网站,一般情况下动态网站通过数据库进行架构。 动态网站除了要设计网页外,还要通过 数据库 和 编程序 来使网站具有更多自动的和高级的功能。
HTTP:
超文本传输协议(HTTP,Hyper Text Transfer Protocol)是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出;而消息内容则具有一个类似MIME的格式。(百度百科)
HTTP是客户端和服务器请求和应答的标准(TCP)。客户端是终端用户,服务器端是网站。通过使用web浏览器、网络爬虫或者其他工具,客户端发起一个到服务器上指定端口(默认端口为80)的HTTP请求。
动态网站开发所需要的web构件:
1.客户端浏览器
2.web前端-HTML,CSS,JS
3.web服务器
4.服务器端编程语言
5.数据库管理系统
HTML基础语法:
HTML 超文本标记语言,后缀为.html或htm
HTML是由标签和内容构成的
标签:是由<>括起来的
双标签:<标签名>…</标签名>
单标签:<标签名/>
标签还可以添加属性:
<标签名 属性名1=“值1” 属性名2=“值2”>…</标签名>
标签规范:标签名小写、属性名使用双引号、标签要闭合。
基本结构:

<!DOCTYPE html>      <!-- HTML类型 HTML5标准 -->
<html lang="en">
	<head>           <!-- 对网页做一些说明,编码格式之类 不呈现网页上 -->
		<meta charset="UTF-8">
		<title>网页标题</title>
		<!-- 此处可以写各种页头属性设置,css样式和JavaScript脚本等... -->
	</head>
	
	<body>            <!-- 网页内容 -->
		网页显示内容
	</body>
</html>

注释:

<!-- 唯一注释符号 -->

HTML头部信息

<meta charset="utf-8"/>                               <!-- 设置网页编码-->
<meta name="Keywords"content="关键字"/>               <!-- 关键字 -->
<meta name="Description"content="简介、描述"/>        <!--  描述-->
<title>本网页标题</title>                             <!-- 网页标题 -->
<link type="text/css"rel="stylesheet"href="**.css"/> <!-- 导入css文件-->
<style type="text/css">嵌入css样式代码</style>        <!-- css代码 -->
<script>...</script>                                 <!-- js或文件代码 -->

HTML常用标签介绍:
1.文本标签

<hn>...</hn>        <!-- n为1-6的值,标题标签(加粗、独立行)h1最大h6最小-->
<i>...</i>             <!-- 斜体  -->
<em>...</em>           <!-- 强调斜体  -->
<b>...</b>             <!-- 加粗  -->
<strong>...</strong>   <!-- 强调加粗  -->
<u>...</u>             <!-- 下划线 -->
<cite>...</cite>       <!-- 作品的标题(引用)  -->
<sub>...</sub>         <!-- 下标  -->
<sup>...</sup>         <!-- 上标  -->
<del>...</del>         <!-- 删除线  -->

示例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <title>html练习文本标签</title>
    </head>
    <body>

     <h1>H1标签</h1>        <!-- n为1-6的值,标题标签(加粗、独立行)h1最大h6最小-->
     <h2>H2标签</h2>
     <h3>H3标签</h3>
     <h4>H4标签</h4>
     <h5>H5标签</h5>
     <h6>H6标签</h6>

    <i>斜体</i>                       <!-- 斜体  -->
    <em>强调斜体</em><br/>            <!-- 强调斜体  -->
    <b>加粗</b><br/>                  <!-- 加粗  -->
    <strong>强调加粗</strong><br/>    <!-- 强调加粗  -->
     <u>U下划线标签</u><br/>          <!-- 下划线 -->
    <cite>作品的标题</cite><br/>      <!-- 作品的标题(引用)  -->
    <sub>下标</sub><br/>             <!-- 下标  -->
    <sup>上标</sup><br/>             <!-- 上标  -->
    <del>删除线</del><br/>           <!-- 删除线  -->



    </body>
</html>

运行结果如下:
在这里插入图片描述
2.格式化标签:

<br/>                  <!-- 换行 -->
<p>...</p>             <!-- 换段 -->
<hr/>                  <!-- 水平分割线 -->
	 <!-- 列表 -->
	 <ul>...</ul>          <!-- 无序列表 -->
	 <ol>...</ol>    <!--有序列表 其中type类型值:Aali 1 start 属性表示起始值-->
	 <li>...</li>           <!-- 列表项 -->
	 <dl>...</dl>           <!-- 自定义列表 -->
	 <dt>...</dt>           <!-- 自定义列表头 -->
	 <dd>...</dd>           <!-- 自定义列表内容 -->
 
<div>...</div>  <!--常用于组合块级元素,以便通过CSS来对这些元素进行格式化-->
<span>...</span>       <!-- 用于包含文本,通过CSS来对它进行定义样式,或者使用javaScript对它进行操作 -->
 


<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>格式化实例测试</title>
    </head>
    <body>
        <h1>HTML格式化标签</h1>
        <div style="width:600px">
            <p>
                某程序员退休后决定练习书法,
                于是重金购买文房四宝。
                一日,饭后突生雅兴,
                一番研墨拟纸,并点上上好檀香。
                定神片刻,泼墨挥毫,郑重地写下一行字:
                hello world!
            </p>             <!-- 换段 -->
            <p>
               当年刚学打篮球的时候,
               疯狂地迷恋上了乔丹,
               然后迷恋上了NIKE,
               更熟记了NIKE的那句广告语:JUST DO IT。
			   然后…我从此进入了IT行业。。。
            </p>             <!-- 换段 -->
        <hr/>                  <!-- 水平分割线 -->



    	 <!-- 列表 -->
            你的爱好:
	     <ul  type="circle">
             <li>看书</li>
             <li>上网</li>
             <li>爬山</li>
             <li>唱歌</li>
         </ul>          <!-- 无序列表 -->


	     <ol type="1">
             <li>看书</li>
             <li>上网</li>
             <li>爬山</li>
             <li>唱歌</li>

         </ol>    <!--有序列表 其中type类型值:Aali 1 start 属性表示起始值-->



	     <dl>
             <dt>问:你来自哪里?</dt>           <!-- 自定义列表头 -->
	         <dd>答:四川。</dd>           <!-- 自定义列表内容 -->
         </dl>           <!-- 自定义列表 -->


    <div>aaaaaaaaaaaaaaaaaaaa</div><div>bbbbbbbbbbbbbbbbbbb</div>  <!--常用于组合块级元素,以便通过CSS来对这些元素进行格式化-->
    <span>dgwhbjkqqkwkwq</span><span>ddddddddddddd</span>      <!-- 用于包含文本,通过CSS来对它进行定义样式,或者使用javaScript对它进行操作 -->

    </body>
</html>

在这里插入图片描述

内容太多,今天就先更到这里。拜拜喽!
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值