视频播放网站怎么做,宁波网络公司哪家最好,wordpress好,做网站包括什么软件HTML
1 介绍 HTML(Hypertext Markup Language) 超文本标记语言。静态网页#xff0c;用于在浏览器上显示数据 超文本: 指页面内可以包含图片、链接#xff0c;甚至音乐、程序等非文字元素。 标记语言: 使用 括起来的语言 超文本标记语言的结构, 包括“头”部分用于在浏览器上显示数据 超文本: 指页面内可以包含图片、链接甚至音乐、程序等非文字元素。 标记语言: 使用 括起来的语言 超文本标记语言的结构, 包括“头”部分英语Head、和“主体”部分英语Body其中“头”部提供关于网页的信息“主体”部分提供网页的具体内容。
2 基本语法
!DOCTYPE html
!--定义根--
html langen
!--定义头--
headmeta charsetUTF-8!--定义页面标题--titleTitle/title
/head
!--定义页面主体内容--
body
/body
/html3 属性与值
!--color:属性名 red:属性值 属性名和属性值用 “” 连接, 每个标签都有id,style,class等核心属性--
h1 stylecolor: red这里是小红/h1① HTML 标准属性是大多数 HTML 和 XHTML 都有支持的属性 class 规定元素的类名classname id 规定元素的唯一 id style 规定元素的行内样式inline style title 规定元素的额外信息以及其它的语言键盘属性等 ② 标签上的可选和必选属性只针对单个的标签有效果Mapper.xml ③ 事件属性使 HTML 事件触发浏览器中的行为例如点击某个 HTML 元素时启动一段 JavaScript
4 标签嵌套
!--正确嵌套--
span这里是小黑h1 stylecolor: red这里是小红/h1/span
!--这是错误的,标签不能错乱嵌套--
h1 stylecolor: red这里是小红span这里是小黑/h1/span5 转义字符与特殊字符
此处引号需用英文gtltampquotregcopytradenbspemsp®©™ (两者都为空格)
6 常用 HTML 标签
!-- 注释内容 --:注释标签;html:文档根标签;head:页面头部标签;title:页面标题,放置于head/head之间;body:页面主体部分;style:写 css 或引入CSS文件,一般放在head/head中;script: 写 JavaScript 或引入 JavaScript 文件,一般在head/head中;h1到h6:标题一到标题六,与world一致;p:定义段落div:定义文档结构;为HTML提供结构和背景;span:和div基本相似,区别是span默认不换行;br/:单标签,插入一个换行;hr/:单标签,定义一条水平线;span 标签不会导致换行 div 会换行 p 会产生一个段落,段落之间有默认间距
7 超链接和锚点 超链接,即指向内容链接属于一个网页中可通过超链接同其他网页或站点之间进行连接的元素。从一个网页指向一个目标的连接关系这个目标可以是另一个网页也可以是相同网页上的不同位置还可以是图片电子邮件地址文件甚至是一个应用程序。 一个网页中作为超链接的对象可以是一段文本或是一个图片。当浏览者单击已经链接的文字或图片后链接目标将显示在浏览器上并且根据目标的类型来打开或运行。各个网页链接后才构成一个网站。
!DOCTYPE html
html langen
headmeta charsetUTF-8titletj/title
/head
body
a href#a1第一页/a br/
a href#a2第二页/a br/
a href#a3第三页/a br/
!--用 name 或 id 属性创建一个文档内部的书签创建指向文档片段的链接--
a ida1div styleheight: 800px;background-color: mediumorchid;一/div
/a
a ida2div styleheight: 800px;background-color:lemonchiffon二/div
/a
a ida3div styleheight: 800px;background-color:orange;三/div
/a
/body
/html8 列表标签
① 有序列表
!--type属性: 可指定列表项目序号类型,属性值有: A : 表示使用大写英文字母作为序号;如A、B、C 等;a : 表示使用小写英文字母作为序号;如a、b、c 等; I : 表示使用大写罗马数字作为序号;如I、II、III 等;i : 表示使用小写罗马数字作为序号;如i、ii、iii 等; 1 : 表示使用阿拉伯数字作为序号;如1、2、3 等;start属性:可表示列表的起始序号;--ol typea start3li大黄/lili大白/lili小黑/lili小侯/li
/ol② 无序列表
!--type 属性: 可指定列表项目符号类型,属性值有:disc:表示实心圆点; ●square:表示空心圆圈; ■circle:表示实现方块; ○--
ul typecircleli大黄/lili大白/lili大黑/lili小侯/li
/ul③ 自定义列表 – 无标识列表
!--dl:用于定义列表;该标签只有dt,dd两种子标签;dt:定义列表项的标题;dd:定义普通列表项;--
dldt金毛/dtdd大黄/dddd小黄/dddt哈士奇/dtdd哈总/dd
/dl9 图片标签 于网页中嵌入一张图片; 标签不是在网页中插入图像,而是从网页上链接图像
!--标签属性: 两个必需属性src 和 altsrc : 指定显示图片文件所在位置; alt : 指定一段文本,可用于当图片不能显示时显示的提示信息; height: 图片高度,可为像素值或百分比; width: 图片宽度,可为像素值或百分比;--
img srcdog.jpg altdog height30%!--a和img标签同时使用可做图片超链接;--
a hrefdemo.htmlimg srcimage/dog.jpg/a10 表格标签
!--table: 定义表格,table可以有多个tr子标签常用属性:border:指定表格边框的宽度,默认是0;cellpadding:指定单元格内容和单元格边框的间距,值可是像素或百分比;cellspacing:指定单元格之间的间距,值可是像素或百分比;width:指定表格的宽度,值可以是像素或百分比;
tr: 定义表格的行align: 设置行中的单元格内容的位置(left/center/right)定义表格行,该标签只能有td或th子标签;
td: 定义单元格,放在tr中,表示把一行分成 N 个单元格;(N取决于N对td);常见属性:colspan:指定该单元格跨多少列,属性值是数字; columrowspan:指定该单元格横跨的行数; rowheight:指定单元格的高度;width:指定单元格的宽度;
th:定义表格标题头的单元格,用法和td标签一样的,只是显示效果不同;--body
table border1 cellpadding0 cellspacing0 width80%tr stylebackground-color: orangeth姓名/thth性别/thth年龄/thth体长/thth体重/thth电话/th/trtrtd height60px;大黄/tdtd colspan2公/tdtd width60px;80/tdtd rowspan220/tdtd19212312314/td/trtrtd大白/tdtd母/tdtd50/tdtd18/tdtd19232132122/td/tr
/table
/body11 表格分层标签
body
!--
tbody: 定义表格的主体,该标签只能包含tr子元素;
使用tbody标签可以将一个表格分成几个独立的部分;
tbody可以将表格里的一行或多行合并成一组,使用Ajax编程的时需要动态修改表格的某几行,此时可使用tbody标签;
thead:定义表格头(标题行),用法和 tbody 一致,功能有点差别;
tfoot:定义表格脚统计行,用法和 tbody 一致,功能有点差别;
当打印表格式,表格头和表格脚的数据也会包含在数据的页面上;
thead,tbody,tfoot标签可以对表格的行进行分组,每对tbody就是一组;
无论三者的先后顺序如何,不影响页面顺序为上面显示表格头,中间是显示表格体,最下面显示表格脚数据;
建议顺序为:thead,tfoot,tbody;若网速慢没有加载出表格体的数据,但是表格头和表格脚的信息会先显示出来,表明页面可用--table
thead
trth名字/thth体重/thth颜色/thth电话/th
/tr
/thead
tfoottr aligncentertd colspan4首页 上一页 下一页 末页/td/tr/tfoot
tbody
trtd大黄/tdtd20/tdtd黄色/tdtd19212312322/td
/tr
trtd大白/tdtd22/tdtd白色/tdtd19232132122/td
/tr
/tbody
/table
/body12 表单标签 form action“#” 中#的作用是将表单的提交目标设置为当前页面。当表单提交时页面将重新加载并执行相应的处理程序。这种设置通常用于在同一页面上处理表单数据而不需要跳转到其他页面。
body
!--
from : 表单标签,用来收集用户录入的数据
action: 指定数据提交的位置,当点击”提交”按钮时,表单数据提交到哪个地址
method : 指定表单数据提交的方式,分为 GET 或 POST 请求,默认是 get 方式(数据会显示在地址栏上);
enctype : 指定表单数据提交的编码格式属性有一下三种 :application/x-www-form-urlencoded url 发送前编码所有字符(默认)multipart/form-data 不做编码,二进制方法提交 ,以后使用文件上传必须使用text/plain 空格转号不对特殊字符编码
--form action# methodget
/form
/body13 表单控件标签 表单控件用于收集用户数据是 form 表单的子元素。不同标签与类型的展现方式不同,需放在 form 标签内部
① input 标签 功能丰富用于接收用户输入的信息
type 属性指定输入标签的类型:
单行文本框 : type text,输入的文本信息直接显示在框中;
密码输入框 : type password,输入的文本以圆点形式显示;
单选框 : type radio,如性别选择;
复选框 : type checkbox,如多个兴趣选择;
隐藏域 : type hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个
数据;
提交按钮 : type submit,用于提交表单中的数据内容;
重置按钮 : type reset,将表单中填写的内容均设置为初始值;
无动作按钮 : type button,可使用javascript为其自定义事件;
文件上传域 : type file,会生成一个文本框和一个浏览按钮;
图像域 : type image, 它可以替代submit按钮,即图像提交按钮input 标签中其他常见属性:
name: 指定 input 标签的名字,没有设置 name 属性的标签不能提交数据;
value:指定input标签的初始值;
checked:设置单选框,复选框的初始状态是否选中;
disabled: 设置input标签加载时禁用此标签; 不能提交到
maxlength:文本框输入最大字符数,属性值是数字;
readonly: 指定文本框内值不允许直接修改; 能被提交
placeholder 提示信息的显示② select 标签 下拉框标签以 option 标签为子标签二者一般结合使用
!--
select 常用属性
multiplemultiple 可以选中多个
size3 显示几个
option 常用的属性 :
selected”selected”:默认选中的选项--select namecity
option value---请选择---/option
option valuezh selectedselected牙克石/option
option valueen海拉尔/option
/select③ textarea 标签 文本域标签: 用户录入多行多列数据
textarea cols60 rows6今天的天气是零下40度/textarea
