网页制作html与css博客世界,用HTML做一个属于你的 “世界“

前言

当你学会了HTML语言,你就可以做一个你自己想要的并且可以分享的“简易世界”。

HTML简介

HTML 是用来描述网页的一种语言。

. HTML 指的是超文本标记语言,最基础的网页语言 (Hyper Text Markup Language)

. HTML 不是一种编程语言,而是一种标记语言 (markup language)

. HTML是用标记(标签/元素)来描述网页内容的,

. HTML是文档的一种

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

. HTML 标签是由 <> 包围的关键词,比如

. HTML 标签通常是一对一对出现的,比如 :  和 

. 标签对中的第一个标签是开始标签,第二个标签是结束标签

. 开始和结束标签也被称为开放标签和闭合标签

HTML 结构HTML>

. 结构各部分详细解释:1. HTML>用来指定当前页面所遵循的html的版本,不写默认是

2. 

头部分用来存放html页面的基本属性信息,优先被加载

3. 

体部分用来存放页面数据,是可见的页面内容

HTML语法

html标签分为开始标签和结束标签,如果标签内没有修饰的内容, 开始标签和结束标签可以合并为一个自闭标签如:


 

. 标签通常都可以具有属性, 属性与属性值用"="连接, 属性的值可以用双引号、单引号引起来或者不用引号, 一般会用双引号引起来HTML的注释:

html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示

如果非要输入空格,可以用转义字符来替代  

如果非要输入换行,可以用 
 来代替

转义字符

>>

""

''

空格 

HTML 编辑font标签用来指定文本的字体/大小/颜色

color:指定字体颜色  值可以指定为颜色名 如:red

或 十六进制的颜色值 如:#000000

或 rgb三原色值 如:rgb(255,255,255)

79c023816dc9089f2c506e2d6609b9d1.png标题标签

指定特定样式字体的一组标签 (掌握)

一级标签

二级标签

三级标签

四级标签
五级标签
六级标签

属性:

align:指定文本的排列

left (左,默认也为左)

center (中间)

right (右边)

justify(对齐)

5ad1d3a9b44462ff758f60bec8fb67d2.png

3. 列表标签

3.1 定义列表

 列表的标题项
 列表的内容项

96cafbd92e8cbae00c888c75461a4640.png

3.2 有序列表

  1.  开启有序列表
  2.  定义列表中的项

    属性:

    start:规定列表从第几项开始

    type:定义列表数字的格式

    1,a,A,i,I

    d5213bd0f2cf243df147fd2c7cf65161.png

    3.3 无序列表

    •  定义一个无序列表
    •  定义列表中的项

      属性:

      type:定义项目符号的类型

      disc square circle

      d0de95f0c0471995a7493613835e0368.png

      4. img标签 – 图像标签

      必选属性:

      src:图片的路径

      alt:代替图像显示的文本

      可选属性:

      width:宽度 px %

      height:高度 px %

      border:边框的宽度 px %

      23f73791c96385482ad904fefe25c328.png

      5.超链接--  锚

      用于指向当前位置以外的资源

      (1) 用于创建指向另外一个文档的超链接

      (2) 用于在当前页面的不同位置之间进行跳转

      重要属性:

      href: 所指向资源的URL

      name: 指定锚的名字

      target: 指定浏览器打开目标URL的方式。

      _blank在新窗口中打开目标url

      _self在当前窗口中打开目标url

      10ba2824ddebb31090faeb8454669c16.png

      6. 表格标签

       定义表格的标题
      定义表格中的单元格定义表格中的表头

      table的重要属性:

      border 边框宽度

      cellspacing 单元格之间的空白

      cellpadding 边框与单元格内容之间的距离

      bgcolor 背景颜色

      bordercolor 边框颜色

      width 宽度

      align 对齐方式

      tr重要属性:

      align 对齐方式

      bgcolor 背景颜色

      th/td重要属性:

      align 对齐方式

      bgcolor 背景颜色

      width 宽度

      height 高度

      colspan 可横跨的列数

      rowspan 可竖跨的行数

      6feadf0e464bdcbf4704edfd61d3631f.png

      7.表单(1)浏览器向服务器发送数据的方式, 有两种

      a)利用超链接向服务器发送数据 -- 请求参数

      在超链接的后面拼接上要发送的请求参数, 链接和请求参数之间用?分割,

      参数名和参数值用 = 连接, 多个参数之间用 & 分割, 可以存在多个同名的

      参数

      b)利用表单向服务器发送数据

      利用HTML中的

      标签以及一些表单项标签, 用户可以输入数据,

      通过提交表单发送数据给服务器

      (2)form标签

      必须存在的属性:

      action: 指定表单发送的目标URL地址

      可选的属性:

      method: 指定以何种方式发送表单

      http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交

      只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST")

      才是POST提交,其他提交都是GET提交.

      GET提交和POST提交的区别:

      主要区别体现在数据传输方式的不相同

      a)GET提交: 请求参数会赋在地址栏后进行传输

      这种方式发送的数据量有限, 最大不超过1kb(或4kb)

      数据显示在地址栏, 安全性差

      b)POST提交: 请求参数在底层流中传输

      这种方式发送的数据量无限制

      地址栏上看不到数据, 比较安全

      表单中可以有多个输入项,输入项必须有name属性才可以被提交,

      如果输入项没有name属性,则表单在提交时会忽略它

      (3) 输入框

      重要属性:

      type属性

      文本框 text 输入的文本信息直接显示在框中

      密码框 password 输入的文本以圆点或者星号的形式显示

      单选框 radio 进行单项的选择如性别选择多个radio的name属性

      相同会被当作一组来使用  必须用value为选项指定提交的值

      复选框 checkbox 进行多项选择,爱好的选择。

      多个checkbox具有相同的name属性时会被当作一组来使用

      必须用value为选项指定提交的值

      隐藏字段 hidden 如果有一些信息,不希望用户看见,

      又希望表单能够提交,就可以用隐藏字段隐含在表单中

      提交按钮 submit 实现表单提交操作的按钮

      可以通过value属性指定按钮显示的文字

      重置按钮 reset 重置表单到初始状态

      按钮 button 普通按钮, 没有任何功能

      需要配合JavaScript为按钮指定具体的行为。

      可以用value属性指定按钮显示的文字。

      文件上传项 file 提供选择文件进行上传的功能。

      图像 image 利用一张图片替代提交按钮的功能, 不常用

      name属性

      表单中可以有多个输入项,输入项必须有name属性才可以被提交,

      如果输入项没有name属性,则表单在提交时会忽略它.

      另外name属性的值是可以重复的

      value属性 可以给input输入框设置一个初始值

      readonly属性

      使当前输入项变为只读,不能修改,但是提交时仍会被提交

      disabled

      使当前输入项不可用,不能修改值,也不会被提交

      size属性

      指定当前输入框的宽度

      checked属性

      指定单选框/复选框被选中

      (4)  文本域

      属性:

      rows 指定文本域的行数(高度)

      cols 指定文本域的列数(宽度)

      readonly 只读

      disabled 禁用

      (5)  

      select 提供下拉选择功能

      option 下拉选框中的选项 可以用value属性指定提交的值,如果不指定,

      将会提交标签内的文本

      重要属性:

      name: 下拉列表的名称

      size: 设置下拉选项中可见选项的个数

      disabled 禁用下拉选框

      multiple 是否支持多选

      08c4dba088218fb52f0582458acb6778.png

      .

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值