php网站开发源代码,网页制作教程网站,商丘网站建设流程,本科生做网站编辑文章目录 HTML标签标签属性 基本结构文档声明HTML标准结构HTML基础排版标签语义化标签块级元素与行内元素文本标签图片标签超链接跳转到指定页面跳转到文件跳转到锚点唤起指定应用 列表有序列表无序列表列表嵌套自定义列表 表格基本结构常用属性跨行跨列 常用标签表单基本结构常… 文章目录 HTML标签标签属性 基本结构文档声明HTML标准结构HTML基础排版标签语义化标签块级元素与行内元素文本标签图片标签超链接跳转到指定页面跳转到文件跳转到锚点唤起指定应用 列表有序列表无序列表列表嵌套自定义列表 表格基本结构常用属性跨行跨列 常用标签表单基本结构常用表单控件文本输入框密码输入框单选框复选框隐藏域提交按钮重置按钮普通按钮文本域下拉框禁用表单控件label标签总体示例 表单总结 HTML
HTMLHyperText Markup Language超文本标记语言。
标签
标签是HTML的基本组成单位。
标签分为双标签和单标签.
标签名不区分大小写但是推荐小写
双标签: 标签名标签体/标签名 单标签: 标签名 标签属性
用于给标签提供附加属性。
可以写在起始标签或单标签中。 标签名 属性名“属性值” 天下 有些特殊的属性没有属性名只有属性值。 注意点
1、不同的标签有不同的属性也有一些通用属性
2、属性名、属性值不能乱写是W3C规定好的
3、属性名、属性值都不区分大小写但推荐小写
4、标签中不要出现同名属性。
基本结构
想要呈现在网页中的内容写在body标签中。
head标签中的内容不会出现在网页中。
head标签中的title标签可以指定网页的标题。
htmlheadtitle网页标题/title/headbody....../body
/html文档声明
作用告诉浏览器当前网页的般般
写法 !DOCTYPE html
注意文档声明必须在网页的第一行且在HTML标签的外侧
HTML标准结构
标准结构如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html输入 !然后回车可以快速生成标准结构。在存放代码的文件夹中存放一个favicon.ico图片可配置网站图标。
HTML基础
排版标签
标签名标签含义单/双标签h1~h6标题双p段落双div没有任何意义用于整体布局双
h1 最好写一个 h2~h6 能适当多写。h1~h6 不能互相嵌套例如 h1 标签中最好不要写 h2 标签了。p 标签很特殊它里面不能有 h1~h6 、 p 、 div 标签
语义化标签
标签默认的效果不重要语义最重要
块级元素与行内元素
块级元素独占一行排版标签都是块级元素
行内元素不独占一行比如input其中只能写行内元素但不能写块级元素。
body!-- 块级元素独占一行 --marquee学习/marquee!-- 行内元素不独占一行--input typetext!-- 规则1块级元素中能写行内元素、块级元素(几乎什么都能写)--divspan学习1/spaninput typetextdiv学习2/div/div!-- 规则2行内元素中能写行内元素不能写块级元素--spanspan学习1/spaninput typetext/span/body文本标签
用于包裹词汇、短语等。
通常写在排版标签中。
排版标签更宏观大段文字文本标签更微观词汇、短语。
文本标签通常是行内元素。 blockquote和address是块级元素其他的是文本标签都是行内元素。 图片标签
标签名标签语义常用属性单双标签img图片src图片路径具体位置alt图片描述width图片宽度像素200px或200height图片高度单
示例代码
bodyimg src./11.PNG width100 alt操作系统
/body像素px是单位 尽量不要同时修改图片的宽和高。 alt属性的作用 搜索引擎通过alt属性得知图片的内容。当图片无法展示时浏览器会呈现alt属性的值。盲人阅读器会朗读alt属性的值。 src路径 相对路径和绝对路径 图片格式jpg、png、bmp、GIF、webp、base64等。 超链接
主要作用从当前页面进行跳转。
实现功能
跳转到指定页面跳转到指定文件跳转到锚点位置唤起指定应用
标签名标签语义常用属性a超链接href:指定要跳转的具体目标。target控制跳转时如何打开页面常用值如下 _self在本窗口打开。 _blank在新窗口打开。id元素的唯一标识可用于设置锚点。name元素的名字写在a标签中也能设置锚点。
跳转到指定页面
bodya hrefhttps://www.jd.com/ target_blank去京东/a a href./10块级元素和行内元素.html target_self去看行内元素/a
/body跳转到文件
代码如下 body!--跳转到文件--!--浏览器可以直接打开的文件--a href./resource/学习.mp4学习/aa href./resource/报名.pdf报名表/aa href./resource/皮卡丘.gif皮卡丘/aa href./resource/风景.jpg风景/a!--浏览器不能打开的文件会自动触发下载--a href./resource/资料.zip内部资料/a!--强制触发下载--a href./resource/学习.mp4 download学习片段.mp4下载电影/a/body跳转到锚点
锚点网页中的一个标记点。
使用方式 设置锚点 !-- 第一种方式a标签配合name属性 --
a nametest1/a
!-- 第二种方式其他标签配合id属性,a以外的其他标签都可以使用id属性--
h2 idtest2我是一个位置/h2注意 具有href属性的a标签是超链接具有name属性的a标签是锚点。name和id是区分大小写的且id最好不要用数字开头。 跳转锚点 !-- 跳转到test1锚点--
a href#test1去test1锚点/a
!-- 跳到本页面顶部 --
a href#回到顶部/a
!-- 跳转到其他页面锚点 --
a hrefdemo.html#test1去demo.html页面的test1锚点/a
!-- 刷新本页面 --
a href刷新本页面/a
!-- 执行一段js,如果还不知道执行什么可以留空javascript:; --
a hrefjavascript:alert(1);点我弹窗/a唤起指定应用
通过a标签可以唤起设备应用程序。
!-- 唤起设备拨号 --
a hreftel:10010电话联系/a
!-- 唤起设备发送邮件 --
a hrefmailto:10010qq.com邮件联系/a
!-- 唤起设备发送短信 --
a hrefsms:10086短信联系/a列表
有序列表
概念有顺序或侧重顺序的列表。
h2要把大象放冰箱总共分几步/h2
olli把冰箱门打开/lili把大象放进去/lili把冰箱门关上/li
/ol无序列表
概念无顺序或不侧重顺序的列表。
h2我想去的几个城市/h2
ulli成都/lili上海/lili西安/lili武汉/li
/ul列表嵌套
概念列表中的某项内容包含一个列表(注意嵌套时请将解构写完整)。
示例如下
!--嵌套列表--
h2我想去的几个城市/h2
ulli成都/lilispan上海/spanulli外滩/lili杜莎夫人蜡像馆/lilia hrefhttps://www.opg.cn东方明珠/a/lili迪士尼/li/ul/lili武汉/lili西安/li
/ul显示结果 注意li标签最好写在 ul 或 ol 中不要单独使用。
自定义列表
概念自定义列表是一个包含术语名称以及术语描述的列表。
一个dl是一个自定义列表一个dt是一个术语名称一个dd是一条术语描述。
示例如下
!--自定义列表--
h2如何高效的学习/h2
dldt做好笔记/dtdd笔记是我们以后复习的一个抓手/dddd笔记可以是电子版也可以是纸质版/dddt多加练习/dtdd只有敲出来的代码才是自己的/dddt别怕出错/dtdd错很正常改正后并记住就是经验/dd
/dl显示结果 表格
基本结构
表格涉及到的标签
table 表格caption 表格标题thead 表格头部tbody 表格主体tfoot 表格注脚tr 每一行th 、 td 每一个单元格备注表格头部中用 th 表格主体、表格脚注中用 td 示例
bodytable border1!--表格标题--caption学生信息/caption!--表格头部--theadtrtd姓名/tdtd性别/tdtd年龄/tdtd民族/tdtd政治面貌/td/tr/thead!--表格主体--tbodytrtd张三/tdtd男/tdtd18/tdtd汉族/tdtd团员/td/tr/tbody!--表格注脚--tfoottrtd/tdtd/tdtd/tdtd/tdtd共计1人/td/tr/tfoot/table
/body结果 常用属性 注意 table元素的border属性可以控制表格边框但是border值的大小不能控制单元格边框的宽度只能控制表格最外侧边框的宽度——后期CSS控制。默认情况下每列的宽度看这一列单元格最长的那个文字。给某个th或td设置了宽度或高度后所在行或列的宽度或高度就确定了。 跨行跨列
rowspan指定要跨的行数。colspan指定要跨的列数。
本节主要是举例来理解跨行跨列的使用。
课程表效果 代码
bodytable border1!--表格标题--caption课程表/caption!--表格头部--theadtrth项目/thth colspan5上课/thth colspan2活动与休息/th/tr/thead!--表格主体--tbodytrth星期/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/thth星期六/thth星期日/th/trtrth rowspan4上午/thth语文/thth数学/thth英语/thth英语/thth物理/thth数学竞赛/thth rowspan4休息/th/trtrth语文/thth数学/thth英语/thth英语/thth物理/thth数学竞赛/th/trtrth语文/thth数学/thth英语/thth英语/thth物理/thth数学竞赛/th/trtrth语文/thth数学/thth英语/thth英语/thth物理/thth数学竞赛/th/trtrth rowspan2下午/thth语文/thth数学/thth英语/thth英语/thth物理/thth数学竞赛/thth rowspan2休息/th/trtrth语文/thth数学/thth英语/thth英语/thth物理/thth数学竞赛/th/tr/tbody/table
/body结果示例 常用标签
标签名标签含义单/双标签br换行单hr分隔单pre按原文显示双 使用p标签来增加文本之间的行间隔或者使用CSS中的margin属性。hr的语义是分隔。 表单
概念一个包含交互的区域用于收集用户提供的数据。
基本结构
标签名常用属性标签语义formaction用于指定表单的提交地址要与后端人员沟通后确定。target用于控制表单提交后如何打开页面常用值如下_self在本窗口打开。_blank在新窗口打开。method用于控制表单的提交方式后续会详细讲解。表单inputtype设置输入框的类型text表示普通文本。name用于指定提交数据的名字主要用于与后端人员沟通。输入框button按钮
示例
form actionhttps://www.baidu.com/s target_blank methodgetinput typetext namewdbutton去百度搜索/button
/form常用表单控件
文本输入框
input typetextname属性数据名称。value属性输入框的默认输入值。maxlength输入框最大可输入长度。 密码输入框
input typepasswordname属性数据名称。value属性输入框的默认输入值一般不用无意义。maxlength输入框最大可输入长度。 单选框
input typeradio namesex valuefemale女
input typeradio namesex valuemale男name 属性数据的名称注意想要单选效果多个 radio 的 name 属性值要保持一致。value 属性提交的数据值。checked 属性让该单选按钮默认选中。 复选框
input typecheckbox namehobby valuesmoke抽烟
input typecheckbox namehobby valuedrink喝酒
input typecheckbox namehobby valueperm烫头name 属性数据的名称。value 属性提交的数据值。checked 属性让该复选框默认选中。 隐藏域
input typehidden nametag value100用户不可见的一个输入区域作用是 提交表单的时候携带一些固定的数据。 name 属性指定数据的名称。 value 属性指定的是真正提交的数据。 提交按钮
input typesubmit value点我提交表单
button点我提交表单/buttonbutton 标签 type 属性的默认值是 submit 。button 不要指定 name 属性input 标签编写的按钮使用 value 属性指定按钮文字。 重置按钮
input typereset value点我重置
button typereset点我重置/buttonbutton 不要指定 name 属性input 标签编写的按钮使用 value 属性指定按钮文字。 普通按钮
input typebutton value普通按钮
button typebutton普通按钮/button普通按钮的 type 值为 button 若不写 type 值是 submit 会引起表单的提交。 文本域
textarea namemsg rows22 cols3我是文本域/textarearows 属性指定默认显示的行数会影响文本域的高度。cols 属性指定默认显示的列数会影响文本域的宽度。不能编写 type 属性其他属性与普通文本输入框一致 下拉框
select namefromoption value黑黑龙江/optionoption value辽辽宁/optionoption value吉吉林/optionoption value粤 selected广东/option
/selectname 属性指定数据的名称。option 标签设置 value 属性 如果没有 value 属性提交的数据是 option 中间的文字如果设置了 value 属性提交的数据就是 value 的值建议设置 value 属性option 标签设置了 selected 属性表示默认选中。 禁用表单控件
给表单空间的标签设置disabled可以禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性.
label标签
label标签可与表单控件相关联关联后点击文字与之对应的表单控件会获取焦点。
两种与 label 关联方式如下 让 label 标签的 for 属性的值等于表单控件的 id 。 把表单控件套在 label 标签的里面。
总体示例
!DOCTYPE html
html langzhheadmeta charsetUTF-8title18表单-常用表单控件/title/headbodyform actionhttps://search.JD.com/search!--文本框--label forzhanghu账户/labelinput idzhanghu typetext nameaccountbr!--密码框--label密码input typepassword namepwdbr/label!--单选框--性别input typeradio namegender valuemale idnanlabel fornan男/labellabelinput typeradio namegender valuefamale checked女/labelbr !--复选框--爱好input typecheckbox namehobby valuesmoke checked disabled抽烟input typecheckbox namehobby valuedrink喝酒input typecheckbox namehobby valueperm烫头br!-- 文本域 --其他textarea nameother cols30 rows3/textareabr!-- 下拉框 --籍贯select nameplaceoption value冀河北/optionoption value鄂 selected湖北/optionoption value湘湖南/optionoption value阅 disabled广东/option/selectbr!--隐藏域--input typehidden nameabc value123br!-- 确认按钮 第一种 --!--button确认/button--!-- 确认按钮 第二种 --input typesubmit value确认!-- 重置按钮 第一种 --!-- button typereset重置/button --!-- 重置按钮 第二种 --input typereset value重置!-- 普通按钮 第一种 --!--button typebutton检测账号是否被注册/button--!-- 普通按钮 第二种 --input typebutton value检测账号是否被注册/form/body
/html效果 表单总结
