HTML基础 #结构 #标签 #排版 #表单

HTML基础

  • 1. html
    • 1.1 文档结构
    • 1.2 标签
    • 1.3 字符实体
    • 1.4 列表
    • 1.5 表格
    • 1.6 页面布局(排版)
    • 1.7 表单
      • 1.7.1 input中属性

  • 前端开发: 也叫web前端开发,它指基于web的互联网产品的界面开发及功能开发。
  • 互联网产品: 网站为例满足用户需求而创建的用于运营的功能及服务。
    HTML基础 #结构 #标签 #排版 #表单_第1张图片

1. html

  • html指超文本标记语言
  • html文档由标签组成,有成对的标签,也有单个的标签。

1.1 文档结构

  • 第一行要声明这是一个html文档
<!DOCTYPE html>
标签 级别 作用
html 1 包含整个文档
head 2 标题,设置,引用外部数据。。。
title 3 标题
meta charset=“UTF-8” 3 编码
body 2 显示的内容

HTML基础 #结构 #标签 #排版 #表单_第2张图片

html有一个属性:lang=""用以定义网页语言,作分析统计用,可写可不写。en表示英文,zh-CN表示中文。

  • 上面是html5,还有一种版本叫xhtml1.0。
  • HTML5的创建快捷键:输入! 按Tab
    HTML基础 #结构 #标签 #排版 #表单_第3张图片
  • xhtml1.0的创建快捷键:输入html:xt按Tab

1.2 标签

<!--注释-->
标签 作用
h1 一级标题(涉及SEO,很重要)
p 段落
br 换行
div 一块内容,没有具体语义
span 标签行内元素,表示一行中一小段内容,没有具体语义
em 行内元素,表示语气中的强调值,倾斜
i 行内元素,表示专业词汇,倾斜
b 行内元素,表示关键字,产品名,粗体
strong 行内元素,表示非常重要的内容,粗体
img 图像。属性有src图片地址(可以用绝对路径,也可以用相对路径。相对路径的兼容性比较好。),alt图片显示失败时显示的文字
a 超链接。href定义跳转地址(不知道链接到哪里时,href="#",会跳到该页面头部),title定义鼠标悬停时弹出的提示文字框。target定义连接窗口打开方式,targe="_self"缺省值,覆盖打开;target="_blank"新窗口打开。
ol和li 有序列表
ul和li 无序列表

1.3 字符实体

  •  空格实体。3个相当于一个中文空格。
  • >大于号实体
  • <小于号实体
  • 类似
    这种一个的标签,可以直接写,但规范的写法是
  • p标签是有样式的,所以多个p之间会有间距。div是没有样式的,所以多个div之间紧密连接。
  • 链接如果要找网络资源,一定要加上http://,这样才能知道是去万维网上找。
  • a超链接里面可以嵌套图片,从而点击图片跳转。还可以嵌套其它的。

1.4 列表

  • 有序列表&无序列表:
    HTML基础 #结构 #标签 #排版 #表单_第4张图片
    HTML基础 #结构 #标签 #排版 #表单_第5张图片
  • 定义列表: 用作对某事物的说明
    HTML基础 #结构 #标签 #排版 #表单_第6张图片

1.5 表格

注: 下列表格就是用标签写的

标签 属性 说明
table 声明一个表格
border 定义表格边框
cellpadding 定义单元格与边框的距离
cellspacing 定义单元格与单元格之间的距离
align 设置整体表格相当于浏览器窗口的水平对齐方式。left/center/right
tr 定义表格中的一行
td 定义一行中的一个普通单元格
th 定义一行中的一个表头单元格
td/th align 单元格内容的水平对齐方式。left/center/right
valign 单元格内容的垂直对齐方式。top/middle/bottom
colspan 设置单元格水平合并
rowspan 设置单元格垂直合并

HTML基础 #结构 #标签 #排版 #表单_第7张图片

1.6 页面布局(排版)

  • 布局的方式分为两种:table布局(也叫传统布局,主要用于EDM广告邮件页面中)、HTML+CSS布局(运用盒子模型)
  • 传统布局:
  1. 将table的border/cellpadding/cellspacing全部设置为0,这样表格的边框和间距就不占有页面空间,只起到划分空间的作用。
  2. 表格可以嵌套表格,嵌套表格划分局部的空间
  3. 单元格中的元素或者嵌套的表格用align和valign设置对齐方式
  4. 通过属性或css样式设置单元格中元素的样式

1.7 表单

标签 属性 说明
form 定义表单区域
from action 定义表单数据提交地址
from methon 定义表单提交的方式,一般有“get”和“post”方式
label 为表单元素定义文字标注
input 定义通用表单元素
  • 多行文本输入框,可以用textarea
  • 下拉表单用select加上option

  • from的action属性:
  1. action=""会指定表单的提交地址,填空的话,会提交到本地。
  2. 每个表单控件的name值会作为字段名,表单控件的输入值会作为值,存储到这个表单之中。
  3. 单选,多选,提交的值是控件的value属性值。其实输入框的value值,就是输入的部分。
  • label的for属性:
  • 我们需要点击输入框,才能在输入框里加光标。有没有办法,点击label,就插入光标呢?
  • 可以用for属性,值与表单控件的id值相同即可。换言之,label的for属性,是让其中的文字变得可以点击,点击会寻找相同id的控件。

1.7.1 input中属性

  • type属性
说明
text 单行文本输入框
password 密码输入框
radio 单选框
checkbox 复选框
file 上传文件
submit 提交按钮
reset 重置按钮
image 定义图片作为提交按钮,用src属性定义图片地址。会传入点击的图片区域坐标。(有时会发生提交两次的Bug)
hidden 隐藏的表单域,用来存储值
  • value属性 定义表单元素的值

你可能感兴趣的:(网络,html,前端)