大众创新网官方网站首页,西安二手房,杭州seo平台,wordpress 充值系统一#xff1a;HTML简介
*HTML是一门语言#xff0c;所有的网页都是用HTML这门语言编写出来的#xff1b;
*HTML#xff1a;超文本标记语言#xff1b; 超文本#xff1a;超越了文本的限制#xff0c;比普通文本更强大。除了文字信息#xff0c;还能定义图片#xff…一HTML简介
*HTML是一门语言所有的网页都是用HTML这门语言编写出来的
*HTML超文本标记语言 超文本超越了文本的限制比普通文本更强大。除了文字信息还能定义图片音频视频等内容 标记语言由表签构成的语言
*HTML运行在浏览器上HTML标签由浏览器来解析
*标签都是预定义好的。例如使用img展示图片
*W3C标准网页主要由三部分构成 结构HTML 表现CSS 行为JavaScript
二HTML快速入门
1.基本步骤
(1)新建文本文件后缀名改为.html
(2)编写HTML结构标签
(3)在body中定义文字
htmlheadtitle html快速入门/title/headbody乾坤未定你我皆是黑马/body/html2.修改文字颜色
htmlheadtitle html快速入门/title/headbodyfont colorred乾坤未定你我皆是黑马/font/body/html
注 HTML 文件以 .htm 或 .html 为扩展名 HTML 标签不区分大小写 如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。 HTML 标签属性值 单双引皆可 如上案例中的color 属性值使用双引号也是可以的。 HTML 语法松散 比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做严格按照要求去写。 三基础标签 html langen
head!-- 页面的字符集--meta charsetUTF-8titleTitle/title
/head
bodyh1我是标题 h1/h1
h2我是标题 h2/h2
h3我是标题 h3/h3
h4我是标题 h4/h4
h5我是标题 h5/h5
h6我是标题 h6/h6hr
!--html 表示颜色1. 英文单词red,pink,blue...2. rgb(值1,值2,值3)值的取值范围0~255 rgb(255,0,0)3. #值1值2值3值的范围00~FF
--
font face楷体 size5 color#ff0000传智教育/fonthr刚察草原绿草如茵沙柳河水流淌入湖。藏族牧民索南才让家中茶几上摆着馓子、麻花和水果炉子上刚煮开的奶茶香气四溢……br有什么人能用绿竹作弓矢射入云空永不落下我之想象犹如长箭向云空射去去即不返。长箭所注在碧蓝而明静之广大虚空。hr
p刚察草原绿草如茵沙柳河水流淌入湖。藏族牧民索南才让家中茶几上摆着馓子、麻花和水果炉子上刚煮开的奶茶香气四溢……
/p
p有什么人能用绿竹作弓矢射入云空永不落下我之想象犹如长箭向云空射去去即不返。长箭所注在碧蓝而明静之广大虚空。
/p
hr沙柳河水流淌brb沙柳河水流淌/bbr
i沙柳河水流淌/ibr
u沙柳河水流淌/ubrhr
centerb沙柳河水流淌/b
/center/body
/html 四图片音频视频标签 **img 定义图片 src规定显示图像的 URL 统一资源定位符 height定义图像的高度 width定义图像的宽度 **audio 定义音频。支持的音频格式 MP3 、 WAV 、 OGG src规定音频的 URL controls显示播放控件 **video 定义视频。支持的音频格式 MP4, WebM 、 OGG src规定视频的 URL controls显示播放控件 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headbody
!--资源路径1.绝对路径完整路径这里的绝对路径是网络中的绝对路径。 格式为 协议://ip地址:端口号/资源名称。如
img srchttps://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20aferikPb3C9e5%2b%2b3a9Vwriuhttp%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpgehk9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3drislpidImgRaw width300 height4002.相对路径相对位置关系找页面和其他资源的相对路径。./ 表示当前路径../ 表示上一级路径../../ 表示上两级路径尺寸单位1.像素单位是px2.百分比占父标签的百分比。例如宽度设置为 50%意思就是占它的父标签宽度的一般50%
--
img srca.jpg width300 height400audio srcb.mp3 controls/audiovideo srcc.mp4 controls/video/body/html
五超链接标签 a 标签属性 href指定访问资源的 URL target指定打开资源的方式 _self默认值在当前页面打开 _blank在空白页面打开 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headbodya hrefhttps://www.itcast.cn 点我有惊喜/a
a hrefhttps://www.itcast.cn target_blank点我有惊喜/a/body/html
六列表标签 type:设置项目符号
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headbodyol typeAli咖啡/lili牛奶/lili果汁/li
/olulli咖啡/lili牛奶/lili果汁/li
/ul/body/html 七表格标签 **table 定义表格 border规定表格边框的宽度 width 规定表格的宽度 cellspacing规定单元格之间的空白 **tr 定义行 align定义表格行的内容对齐方式 **td 定义单元格 rowspan:规定单元格可横跨的行数 colspan:规定单元格可横跨的列数 **th 定义表头单元格 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/headbodytable width50% border1 cellspacing0tr height50th序号/thth品牌logo/thth品牌名称/thth企业名称/th/trtr aligncentertd010/tdtdimg src../img/三只松鼠.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtr aligncentertd010/tdtdimg src../img/优衣库.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtr aligncentertd010/tdtdimg src../img/小米.png width60 height50/tdtd小米/tdtd小米科技有限公司/td/tr
/table/body/html !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodytable width50% border1 cellspacing0tr height50th colspan2品牌logo/thth品牌名称/thth企业名称/th/trtr aligncentertd010/tdtdimg src../img/三只松鼠.png width60 height50/tdtd三只松鼠/tdtd三只松鼠/td/trtr aligncentertd rowspan2009/tdtdimg src../img/优衣库.png width60 height50/tdtd优衣库/tdtd优衣库/td/trtr aligncentertd008/tdtdimg src../img/小米.png width60 height50/tdtd小米/td/tr
/table/body
/html 八布局标签 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv我是div/div
div我是div/div
span我是span/span
span我是span/span/body
/html 九表单标签
表单在网页中主要负责数据采集功能使用form标签定义表单
表单项元素不同类型的input元素下拉列表文本域等 form定义表单 **action规定当提交表单时向何处发送表单数据该属性值就是 URL 以后会将数据提交到服务端该属性需要书写服务端的URL 。而今天我们可以书写 # 表示提交到当前页面来看效果。 **method 规定用于发送表单数据的方式 method取值有如下两种 get默认值。如果不设置method 属性则默认就是该值请求参数会拼接在URL 后边 url 的长度有限制 4KB post浏览器会将数据放到http请求消息体中请求参数无限制的 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyform action# methodpostinput typetext nameusernameinput typesubmit
/form/body
/html
十表单项标签 html langenheadmeta charsetUTF-8titleTitle/title
/head
bodyform action# methodpostinput typehidden nameid value123label forusername用户名/labelinput typetext nameusername idusernamebrlabel forpassword密码/labelinput typepassword namepassword idpasswordbr性别input typeradio namegender value1 idmale label formale男/labelinput typeradio namegender value2 idfemale label forfemale女/labelbr爱好input typecheckbox namehobby value1 旅游input typecheckbox namehobby value2 电影input typecheckbox namehobby value3 游戏br头像input typefilebr城市:select namecityoption北京/optionoption valueshanghai上海/optionoption广州/option/selectbr个人描述textarea cols20 rows5 namedesc/textareabrbrinput typesubmit value免费注册input typereset value重置input typebutton value一个按钮/form/body/html
