HTML介绍

HTML介绍,第1张

概述web服务本质 浏览器发请求 -----> HTTP协议---->服务端接受请求----->服务端返回响应------>服务端把HTML文件内容发给浏览器----->浏览器渲染页面 HTML是什么? 超文本标记语言,是一种用于创建网页的标记语言. 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不用的浏览器,同一个标签可能会有不同的解释.(兼容性问题) 网页文件的 @H_502_1@ web服务本质

浏览器发请求 -----> http协议---->服务端接受请求----->服务端返回响应------>服务端把HTML文件内容发给浏览器----->浏览器渲染页面

HTML是什么?

超文本标记语言,是一种用于创建网页的标记语言.

本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不用的浏览器,同一个标签可能会有不同的解释.(兼容性问题)

网页文件的扩展名:.HTML或.htm

浏览器只认识HTML CSS Js

HTML不是什么?

HTML是一种标记语言,它不是一种编程语言.

HTML使用标签来描述网页

http协议(******)

  超文本传输协议:规定了浏览器与服务端之间消息传输的数据格式

  四大特性:

    1.基于请求响应

    2.基于TCP/IP之上的作用于应用层的协议

    3.无状态(服务端无法保存用户的状态,相当于一个人来一千次,我都记不住)

    4.无连接(请求来一次我响应一次,之后立马断开连接,两者之间就不再有任何关系了)

      websocket  相当于是http协议的一个大的补丁  它支持长连接

    请求数据格式

      请求首行(标识http协议版本,当前请求方式)

      请求头(一大堆k,v键值对)

      

      请求体(携带的是一些敏感信息比如密码,身份z号.....)

    响应数据格式

      响应首行(标识http协议版本,当前请求方式)

      响应头(一大堆k,v键值对)

      

      响应体(返回给浏览器页面的数据   通常响应体都是HTML页面)

    响应状态码

      用一串简单的数字来表示一些复杂的状态或者提示信息

      1xx:服务端已经成功接收了你的数据正在处理,你可以继续提交额外的数据

      2xx:服务端成功响应  你想要的数据(请求成功200)

      3xx:重定向(当你在访问一个需要登录之后才能访问的页面,你会发现窗口会自动调到登录页面301 302)

      4xx:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)

      5xx:服务器内部错误(500)

    请求方式:

      1.get请求

        朝服务端要资源(比如浏览器窗口输入www.baIDu.com)

      2.port请求

        朝服务端提交数据(比如用户登录  提交用户名和密码)

    URL:统一资源定位符(简而言之就是网址)

 

HTML文档结构

最基本的HTML文档:

<!@H_403_172@DOCTYPE HTML><HTML lang="zh-CN"><head>  <Meta charset="UTF-8">  <Title>CSS样式优先级</Title></head><body></body></HTML>

1.<!DOCTYPE HTML>声明为HTML5文档

2.<HTML> </HTML>是文档的开始标记和结束的标记.是HTML页面的根元素

3.<head> </head>定义了HTML文档的开头部分.它们之间的内容不会在浏览器的文档窗口显示.包含了文档的元(Meta)数据

4.<Title></Title>定义了网页标题,在浏览器标题栏显示.

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

注意:对于中文网页需要使用 <Meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <Meta charset="gbk">。

HTML标签格式

 

HTML标签是由尖括号包围的关键字,如<HTML>,<div>等 HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束.结束标签会有斜线 也有一部分标签是单独呈现的,比如:<br/>,<hr/>,<img src="1.jpg"/>等. 标签里面可以有若干属性,也可以不带属性 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> <标签名 属性1=“属性值1” 属性2=“属性值2”…… /> 几个很重要的属性: ID:定义标签的唯一ID,HTML文档树中唯一 class:为HTML元素定义一个或多个类名(CSS样式类名) style:规定元素的行内样式(CSS样式) HTML注释

<!--注释内容-->

注释是代码之母.

<!DOCTYPE>标签

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <HTML> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

HTML常用标签 head内常用标签
标签 意义
<Title></Title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义Js代码或引入外部Js文件
<link/> 引入外部样式表文件
<Meta/> 定义网页原信息
Meta标签

Meta标签介绍

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

Meta标签的组成:Meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 

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

Meta标签介绍:

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

Meta标签的组成:Meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 

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

<!--2秒后跳转到对应的网址,注意引号--><Meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"><!--指定文档的编码类型--><Meta http-equiv="content-Type" charset=UTF8"><!--告诉IE以最高级模式渲染文档--><Meta http-equiv="x-ua-compatible" content="IE=edge">

@H_403_172@2.name属性:主要用于描述wangye,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.

<Meta name="keywords" content="Meta总结,HTML Meta,Meta属性,Meta跳转"><Meta name="description" content="老男孩教育Python学院">
body内常用标签 基本标签(块级标签和内联标签)
<b>加粗</b><i>斜体</i><u>下划线</u><s>删除</s><p>段落标签</p><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!--换行--><br><!--水平线--><hr>
特殊字符
内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

 

div标签和span标签(通常都是用来构建网页布局的)

div标签用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现.

span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

 

标签的分类2
1.块儿级标签(独占浏览器一行)
  @H_403_172@div p h
  1.块儿级标签可以修改长宽
  2.块儿级标签内部可以嵌套任意的块级标签
   @H_403_172@ 但是p标签虽然是块儿级标签 但是他不能够其他块儿级标签 包括自身,可以嵌套行内标签
  总结:
    @H_403_172@只要是块儿级标签 都可以嵌套行内标签
    @H_403_172@p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
2.行内标签(自身文本多大就占多大)
  @H_403_172@span b s i u

img标签
<img src="图片的路径" alt="图片未加载成功时的提示" Title="鼠标悬浮时提示信息" wIDth="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签

超链接标签

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

什么是URL?URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。URL举例http://www.sohu.com/stu/intro.HTMLhttp://222.172.123.33/stu/intro.HTMLURL地址由4部分组成第1部分:为协议:http://、ftp://等 第2部分:为站点地址:可以是域名或IP地址第3部分:为页面在站点中的目录:stu第4部分:为页面名称,例如 index.HTML各部分之间用“/”符号隔开。
URL
<a href="http://www.oldboyedu.com" target="_blank" >click me</a>

href后面存放URL的时候  点击跳转到该url

  @H_403_172@如果该链接没有被点过  那么默认是蓝色,只要点过依次  之后都是紫色

target    默认是_self当前页面跳转     _blank新建页面跳转

@H_403_172@锚点功能(回到顶部)

<a href="" ID="a1">顶部</a><div style="height: 1000px;background-color: red"></div><a href="" ID="a2">中间</a><div style="height: 1000px;background-color: green"></div><a href="#a2">回到中间</a><div style="height: 1000px;background-color: yellow"></div><a href="#a1">click me</a>

@H_403_172@href还可以写另一个a    @H_403_172@标签的ID值,点击就会跳到ID值所对应的a标签

列表标签 1.无序列表
<ul type="disc">  <li>第一项</li>  <li>第二项</li></ul>

type属性:

disc(实心圆点,默认值) circle(空心圆圈) square(实心方块) none(无样式) 2.有序列表
<ol type="1" start="2">  <li>第一项</li>  <li>第二项</li></ol>

type属性:

1 数字列表,默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马 3.标题列表
<dl>  <dt>标题1</dt>  <dd>内容1</dd>  <dt>标题2</dt>  <dd>内容1</dd>  <dd>内容2</dd></dl>
表格标签(*****)

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:

<table>  <thead>  <tr>    <th>序号</th>    <th>姓名</th>    <th>爱好</th>  </tr>  </thead>  <tbody>  <tr>    <td>1</td>    <td>Yolo</td>    <td>看书</td>  </tr>  <tr>    <td>2</td>    <td>Yzy</td>    <td>看球</td>  </tr>  </tbody></table>

属性:

border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. wIDth: 像素 百分比.(最好通过CSS来设置长宽) rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格) 表单标签(******)

功能:

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

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

表单还可以包含textarea、select、fIEldset和 label标签。

@H_403_172@能够接收用户输入(输入 选择 上传)并将其发送给后端

  以注册实例位例讲解form表单

<!@H_403_172@DOCTYPE HTML><HTML lang="zh-CN"><head>    <Meta charset="UTF-8">    <Title>Title</Title></head><body><h2>注册页面</h2><form action="">    <p><label for="d1">username:<input type="text" ID="d1" name="username" value="默认值" Disabled></label></p>    <p><label for="d2">password:<input type="password" ID="d2" Readonly></label></p>    <p><label for="d3">brithday:<input type="date" ID="d3"></label></p>    <p>性别:            <input type="radio" name="gender" checked><input type="radio" name="gender"></p>    <p>爱好:        <input type="checkBox">篮球        <input type="checkBox">足球        <input type="checkBox" checked>双色球    </p>    <p>省市:        <select name="" ID="">            <option value="">上海市</option>            <option value="">北京市</option>            <option value="">深圳市</option>        </select>    </p>    <p>伴侣:        <select name="" ID="" multiple>            <option value="">波多野结衣</option>            <option value="" selected>刘亦菲</option>            <option value="">明老师</option>        </select>    </p>    <p>省市1:        <select name="" ID="">            <optgroup label="上海">                <option value="">静安区</option>                <option value="">徐汇区</option>                <option value="">浦东新区</option>            </optgroup>            <optgroup label="北京">                <option value="">朝阳区</option>                <option value="">海淀区</option>                <option value="">昌平区</option>            </optgroup>        </select>    </p>    <p>头像:        <input type="file">    </p>    <p>个人简介:        <textarea name="" ID="" cols="30" rows="10"></textarea>            </p>    <input type="submit" value="注册">    <input type="button" value="注册1">    <input type="reset" value="注册2">    <button>button标签</button>    </form></body></HTML>

action控制数据提交的目的地

  1.不写的情况下  默认提交到当前页面所在的路径

  2.写全路径(https://www.baIDu.com)

  3.路径后缀(/index/)

input      input标签就类似于前端变形金刚

  type

text 普通文本
password 密文(不展示明文)
data 日期
submit 触发提交动作
button 普通按钮  没有实际意义 但是可以通过Js绑定事件实现@R_419_6942@动作 
reset 重置表单内容
radio 单选   可以通过checked控制默认选择(当属性值和属性名相同的情况下  可以简写checked)  checked="checked"
checkBox 多选  同上  可以设置默认值
file 获取用户上传的文件
hIDden 隐藏输入框

  属性说明:

name:表单提交时的“键”,注意和ID的区别 value:表单提交时对应项的值 type="button","reset","submit"时,为按钮上显示的文本年内容 type="text","password","hIDden"时,为输入框的初始值 type="checkBox","radio","file",为输入相关联的值 checked:radio和checkBox默认被选中的项 Readonly:text和password设置只读 Disabled:所有input均适用 select标签

    默认是单选  可以通过multiple变成多选

    如果想默认选择  用selected(selected="selected")

textarea标签

    获取用户输入的大段文本

label标签  
<label for="d1">username:<input type="text" ID="d1" name="username" value="默认值" Disabled></label>

定义:<label> 标签为 input 元素定义标注(标记)。
说明:

label 元素不会向用户呈现任何特殊效果。 <label> 标签的 for 属性值应当与相关元素的 ID 属性值相同。 总结

以上是内存溢出为你收集整理的HTML介绍全部内容,希望文章能够帮你解决HTML介绍所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1036400.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存