前端基础---HTML

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

web服务的本质:


服务端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import   socket
sock = socket.socket()
sock.bind(( "127.0.0.1" , 8800 ))
sock.listen( 5 )
 
while  1 :
         print ( "waiting...." )
         conn,addr = sock.accept()
         data = conn.recv( 1024 )
         print ( 'data' ,data)
         with  open ( "index.html" ) as f:
                 response = f.read()
         conn.send(( "HTTP/1.1 201 OK \r\n\r\n %s"  % response).encode( "utf8" ))           #声明通信的协议
         conn.close()

html

HTMLШ摤文本编辑语言通过标签语言来标记要显示的网页中的各个部分浏览器认识的规则它是一种标记语言不是编程语言使用标记标签来描述网页

静态网页文件扩展名.html  .htm

  1. html结构

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>    #声明解析html文档的格式
< html  lang = "en" >               #< html > </ html >是文档的开始标记和结束标记
< head >                         #< head ></ head >元素出现在文档的开头部分
     < title >网页标题</ title >    #< title ></ title >定义网页标题
</ head >
< body >                     #< body ></ body >之间的文本是可见的网页主体内容
 
</ body >
</ html >

 

<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档

<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档在它们之间是文档的头部<head>和主体<body>

<head></head>元素出现在文档的开头部分。<head></head>之间的内容不会扎浏览主5奈牡荡翱谙允荆瞧浼涞脑赜刑厥庵匾囊庖濉

<title></title>定义网页标题在浏览器标题栏显示。 

<body></body>之间的文本是可见的网页主体内容

 

2.html标签格式

标签的语法

<标签名 属性1=“属性值1 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1 属性2=“属性值2”…… />

 

a.由尖括号包围的关键字。如<html>

b.通常是成对出现的双边标记。如<div></div>

c.标签不区分大小写推荐使用小写

d.标签分为两部分开始标签<a>和结束标签</a>两个标签之间的部分叫做标签体有些标签功能比较简单使用一个标签即可这种标签叫做自闭和标签。如<br/><hr/><input/><img/>

e.标签可以有若干属性也可以不带属性。如<head>元素不带任何属性

f.标签可以嵌套但不能交叉嵌套。如<a><b><a/><b/>

3.常用标签

标签分为两类

block块级标签---自己独占一行

inline内联标签---按内容划分

 

<!DOCTYPE>

声明位于文档中的最前面的位置处于<html> 标签之前。此标签可告知浏览器文档使用哪种 HTML  XHTML 规范

作用声明文档的解析类型(document.compatMode)避免浏览器的怪异模式

document.compatMode

BackCompat怪异模式浏览器使用自己的怪异模式解析渲染页面

CSS1Compat标准模式浏览器使用W3C的标准解析渲染页面

如果未指定DOCTYPE声明则默认使用BackCompat

 

<head>内常用标签

<meta>标签

<meta>元素可提供有关页面的元信息meta-information针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部不包含任何内容。
<meta>提供的信息是用户不可见的

meta标签的组成meta标签共有两个属性

name属性主要用于描述网页与之对应的属性值为contentcontent中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。    

http-equiv属性相当于http的文件头作用它可以向浏览器传回一些有用的信息以帮助正确地显示网页内容与之对应的属性值为contentcontent中的内容其实就是各个参数的变量值

meta标签

1
2
3
4
< title ></ title >
< link  rel=”icon” href=”www.baidu.com”>
< link  rel = "stylesheet" href = "css.css" >
< scriptsrc = "hello.js" ></ script >

 

<body>内常用标签

基本标签块级标签和内联标签

<hn>: n的取值范围是1~6; 从大到小用来表示标题.

<p>: 段落标签包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup><sub>: 上角标  下角表.

<br>:换行.

<hr>:水平线

 

<div><span>

<div></div>块级元素并无实际的意义。主要通过CSS样式为其赋予不同的表现

<span></span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现

如果单独在网页中插入这两个元素不会对页面产生任何的影响这两个元素是专门为定义CSS样式而生的

 

<img>图形标签

src要显示图片的路径.

alt图片没有加载成功时的提示.

title鼠标悬浮时的提示信息.

width图片的宽

height图片的高 (宽高两个属性只用一个会自动等比缩放.)

 

<a></a>超链接标签锚标签

指从一个网页指向一个目标的连接关系这个目标可以是另一个网页也可以是相同网页上的不同位置还可以是一个图片一个电子邮件地址一个文件甚至是一个应用程序

什么是URL

URL是统一资源定位器(Uniform Resource Locator)的缩写也被称为网页地址是因特网上标准的资源的地址

URL举例

http://www.sohu.com/stu/intro.html

http://222.172.123.33/stu/intro.html

URL地址由4部分组成

1部分为协议http://ftp://

2部分为站点地址可以是域名或IP地址

3部分为页面在站点中的目录stu

4部分为页面名称例如 index.html

各部分之间用“/”符号隔开

 

<a href=""target="_blank" >click</a>

href属性指定目标网页地址。该地址可以有几种类型

    绝对 URL - 指向另一个站点比如 href="http://www.jd.com

    相对 URL - 指当前站点中确切的路径href="index.htm"

 URL - 指向页面中的锚href="#top"

 

列表标签

<ul>无序列表 [type属性disc(实心圆点)(默认)circle(空心圆圈)square(实心方块)]

<ol>有序列表

        <li>列表中的每一项.

<dl>定义列表

        <dt> 列表标题

        <dd> 列表项

 

<table>表格标签

表格概念
表格是一个二维数据空间一个表格由若干行组成一个行又有若干单元格组成单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格的基本结构

1
2
3
4
5
6
7
8
9
10
11
< table >
         < tr >
                 < th >标题</ th >
                 < th >标题</ th >
         </ tr >
         
         < tr >
                 < td >内容</ td >
                 < td >内容</ td >
         </ tr >
</ table >


<tr>: table row

<th>: table head cell

<td>: table data cell

属性:

   border: 表格边框

   cellpadding: 内边距

   cellspacing: 外边距

   width: 像素 百分比最好通过css来设置长宽

   rowspan:  单元格竖跨多少行

   colspan:  单元格横跨多少列即合并单元格

 

<form>表单标签

功能

表单用于向服务器传输数据从而实现用户与Web服务器的交互

          表单能够包含input系列标签比如文本字段、复选框、单选框、提交按钮等

          表单还可以包含textareaselectfieldset label标签。

表单属性

          action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据即表单元素值作相应处理

          method: 表单的提交方式 post/get默认取值就是get

表单元素

基本概念
HTML表单是HTML元素中较为复杂的部分表单往往和脚本、动态页面、数据处理等功能相结合因此它是制作东态网拙重要的内容。
表单一般用来收集用户的输入信息
表单工作原理
访问者在浏览有表单的网页时可填写必需的信息然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理如果有错误会返回错误信息并要求纠正错误。当数据完整无误后服务器反馈一个输入完成的信息

<input>系列标签

<1> 表单类型

type:   text         文本输入框

      password  密码输入框

      radio   单选框

      checkbox  多选框 

      submit      提交按钮           

      button      按钮(需要配合js使用.)

      file      提交文件form表单需要加上属性enctype="multipart/form-data"            上传文件注意两点

       1 请求方式必须是post

       2 enctype="multipart/form-data"
 <2> 表单属性

 name        表单提交项的键

 id属卦的屈毙

name属性是和服务器通信时使用的名称id属栽是洵佬器端使用的名称该属性主要是为了方便客户端编程而在cssjavascript中使用的

 

value          表单提交项的值

对于不同的输入类型value 属性的用法也不同

type="button","reset", "submit" - 定义按钮上的显示的文本

type="text","password", "hidden" - 定义输入字段的初始值                

type="checkbox","radio", "image" - 定义与输入相关联的值

checked radio checkbox 默认被选中

readonly     只读. text  password

disabled     对所用input都生效

 

select        下拉选标签

name         表单提交项的键.

size  &nbcp;&njs0;      选项个数

multiplemultiple

      <optgroup>    为每一项加上分组

     <option>  下拉选中的每一项属性

    value           表单提交项的值

   selected  selected下拉选默认被选中

 

<textarea> 多行文本框

<form id="form1"name="form1" method="post" action="">

       <textarea cols=“宽度” rows=“高度” name=“名称”>

                   默认内容

       </textarea>

</form>

 

<label>标签

定义<label> 标签为 input 元素定义标注标记
说明
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id =sp醤 style="font-family:'微软雅黑', 'sans-serif';">属性值相同。

<form method="post"action=""> 

       <label for=“username”>用户名</label>

       <input type=“text” name=“username” id=“username” size=“20” />

</form>

 

<fieldset>标签

<fieldset>

   <legend>登录吧</legend>

   <input type="text">

</fieldset>

 本文转自lyndon博客51CTO博客,原文链接http://blog.51cto.com/lyndon/1967742如需转载请自行联系原作者


迟到的栋子

目录
打赏
0
0
0
0
89
分享
相关文章
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
62 25
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
56 6
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
63 1
前端基础(十七)_HTML5新特性
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
4月前
|
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
281 1
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
257 0
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
129 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等