柠檬网络科技网站建设,做网站设计需要什么技术,教做宝宝辅食的网站,国外做电商网站有哪些目录HTML概念HTML基本格式基本语法常用标签1.文件标签#xff1a;构成html最基本的标签2.文本标签#xff1a;和文本有关的标签3.列表标签4.图片标签5.超链接标签6.表格标签7.表单标签HTML概念
HTML是最基础的网页开发语言#xff0c;Hyper Text Markup Language#xff0…
目录HTML概念HTML基本格式基本语法常用标签1.文件标签构成html最基本的标签2.文本标签和文本有关的标签3.列表标签4.图片标签5.超链接标签6.表格标签7.表单标签HTML概念
HTML是最基础的网页开发语言Hyper Text Markup Language超文本标记语言. 超文本是用超链接的方法将各种不同空间的文字信息组织在一起的网状文本. 标记语言 由标签构成的语言。标签名称 如 htmlxml标记语言不是编程语言 HTML基本格式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body你好
/body
/html1!DOCTYPE声明必须是HTML 文档的第一行位于 标签之前。!DOCTYPE声明不是 HTML 标签是一条指令它用于向浏览器说明当前文档使用哪种HTML标准规范。定义文档类型。 2标签位于!DOCTYPE声明之后被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中标签标志着HTML文档的开始标签则标志着HTML文档的结束它们之间是文档的头部和主体内容。 3标签用于定义HTML文档的头部信息也被称为头部标签。标签紧跟在之后主要用于封装其他位于文档头部的标签如、、及/link/meta
基本语法
1 html文档后缀名 .html 或者 .htm 。 2标签分为 ①双标签有开始标签和结束标签。如 html /html ②单标签开始标签和结束标签在一起。如 br/ ③注释标签注释内容不会显示在浏览器窗口中。如!--注释语句-- 3标签可以嵌套 需要正确嵌套不能你中有我我中有你. 错误ab/a/b 正确ab/b/a 4在开始标签中可以定义属性。属性是由键值对构成值需要用引号(单双都可)引起来。 5 html的标签不区分大小写但是建议使用小写。
常用标签
1.文件标签构成html最基本的标签
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body你好
/body
/html!DOCTYPE html定义文档类型为html文档html根标签head头标签。用于指定html文档的一些属性引入外部的资源title标题标签body主体标签用于定义html文档的内容
2.文本标签和文本有关的标签
以下所写全部代码均在body /body内。
注释标签!-- 注释内容 --
!--你好--标题标签h1 to h6 h1~h6字体大小逐渐递减
h1你好/h1
h2你好/h2
h3你好/h3
h4你好/h4
h5你好/h5
h6你好/h6段落标签p
p
只有正确认识历史才能更好地规划未来开创未来。
/p
p
中华民族有着五千多年的文明史中华传统文化源远流长博大精深。
/p换行标签br
p只有正确认识历史才能更好地规划未来开创未来。br/br中华民族有着五千多年的文明史中华传统文化源远流长博大精深。br/br她作为一种积淀型文化长期以来形成了一种具有相对稳定性的民族精神。/p块级标签 div每一个div占满一整行。
div1/div
div2/div行内标签span 文本信息在一行内展示对文本没有影响
p使用HTML时span通过br标签/span可以实现br换行效果
/p展示一条水平线hr 属性 color颜色 width宽度 size高度 align对齐方式 center居中 left左对齐 right右对齐
hr colorred width500px size10px aligncenter
hr colorblack width500px size10px alignleft
hr colorblue width500px size10px alignright字体标签font 属性 color颜色 size大小 face字体
默认样式br
font face微软雅黑 size7 colorgreen我是7号绿色文本字体是微软雅黑/font字体加粗b字体斜体i
b超文本/b是用超链接的方法将i各种不同空间的文字信息组织在一起的/i网状文本文本居中center
centerhello JavaWeb/center用例 文本是随便找的没别的意思。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h4公司简介/h4
hr colorred
p
font colorred四川创途企业管理有限公司/font成立于bi2018年7月/i/b位于中国科技城绵阳西南科技大学国家大学科技园是依托高校教师团队成立的专门从事高端会议服务、代理记账、审计、财税咨询、工商税务代理、知识产权代理等相关业务的专业服务机构。
/p
p公司汇集了一批注册会计师、注册税务师、中级会计师、知识产权代理人在内的精通财务、税务、审计咨询以及知识产权代理等业务以及精于工商注册、税务流程和资质申办的专业代办人员同时建立了严格的客户档案管理制度和保密制度。公司秉承“诚信经营客户至上”的经营理念致力于为中小微企业及高校科研团队提供精准、安全、规范、保密的专业化一条龙服务。
/p
hr colorred
font colorgray size1px center©2018 All Right Reserved. 西南科技大学新能源与核环境材料研究中心/center
/font
/body
/html3.列表标签
无序列表 至少有一对li/li
ulli列表项1/lili列表项2/lili列表项3/li...
/ul属性
type disc -- ●(默认值)square -- ■circle -- ○
body
ulli无序列表/lili typediscJava Web/lili typesquare数据库系统/lili typecirclec程序语言/li
/ul
/body有序列表
olli列表项1/lili列表项2/lili列表项3/li...
/olbody
olli无序列表/liliJava Web/lili数据库系统/lilic程序语言/li
/ol
/body定义列表
dl dt dd
body
dldt第一点/dtddbalabalabala/dddd阿巴阿巴阿巴/dddt第二点/dtddbalabalabala/dddd阿巴阿巴阿巴/dd
/dl
/body4.图片标签
img src ... 属性
src图片的路径align leftrightcenter -- 居中 widthheightalt ——名称border——设置边框
代码
img srcimg/img/login_bg.png alignright alt兵马俑 width800 height500/相对路径
以.开头的路径./代表当前目录 ./image/1.jpg../:代表上一级目录 img src./image/jiangwai_1.jpg img src../image/jiangwai_1.jpg
5.超链接标签
a href跳转目标 target目标窗口的弹出方式文本或图像/a
body新窗口打开a hrefhttp://www.baidu.com target_blank百度/a/br
父框架集中打开a hrefhttp://www.baidu.com target_parent百度/a/br
默认原窗口打开a hrefhttp://www.baidu.com target_self百度/a/br
整个窗口中打开a hrefhttp://www.baidu.com target_top百度/a/br/body新窗口打开
其他打开方式
6.表格标签
table定义表格 width宽度border边框cellpadding定义内容和单元格的距离cellspacing定义单元格之间的距离.如果指定为0,则单元格的线会合为1条bgcolor背景色align对齐方式 tr定义行 bgcolor背景色align对齐方式 td定义单元格 colspan合并列rowspan合并行
用例跨行跨列表格
!DOCTYPE html
html langen
headmeta charsetUTF-8title跨行跨列/title
/head
bodytable border1px cellspacing0px width500px height300pxtrtd colspan211/td!--td12/td--td13/tdtd14/td/trtrtd21/tdtd rowspan2 colspan222/td!--td23/td--td24/td/trtrtd31/td!--td32/td--!--td33/td--td rowspan234/td/trtrtd41/td!--td42/td--td42/tdtd43/td/tr
/table/body
/html7.表单标签
表单就是在网页上用于输入信息的区域它的主要功能是收集数据信息并将这些信息传递给后台信息处理模块。
①表单标签 表单标签所有需要提交到服务器端的表单项必须使用form/form括起来
form 标签属性
action,整个表单提交的位置(可以是一个页面也可以是一个后台 java 代码)method,表单提交的方式(get/post/delete……等 7 种)
②文本输入项 input type”text” name”” size”” maxlenght”” readonly”” placehoder””/
name提交到服务端必须指定的属性其值可以任意建议见文知意。size指定输入框的宽度maxlenght指定输入内容的长度readonly只读内容不能别修改placehoder输入内容提示信息
③密码输入框 input type”password” name”” /
④单选框 input type”radio” name”” value”” checked””/
name用于分组value提交到服务端必须指定的属性其值可以任意建议见文知意。checked默认选中
⑤多选按钮 input type”checkbox” name”” value”” checked”” /
⑥下拉列表
select name””option value”” selected””选项1/optionoption选项2/option
/selectname分组value提交到服务端必须指定的属性其值可以任意建议见文知意selected默认选中
⑦文件上传项 input type”file” name””/
⑧文本输入域 textarea name””/textarea
⑨提交按钮 input type”submit” value””/
value提交到服务端必须指定的属性其值可以任意建议见文知意
⑩普通按钮 input type”button” value””/
⑪重置按钮 input type”reset” value””/
⑫隐藏项 input type”hidden” name””/ 用于用户比较敏感的一些信息。
用例
!DOCTYPE html
html langen
headmeta charsetUTF-8title注册页面/title
/head
bodyform action# methodposttable border0px aligncenter cellpadding2trtd alignright用户名/tdtdinput typetext,nameusername/td/trtrtd alignright密码/tdtdinput typepassword,namepassword/td/trtrtd alignright性别/tdtdinput typeradio namegender valuemale男input typeradio namegender valuefemale女/td/trtrtd alignright兴趣/tdtdinput typecheckbox nameinterest valuefilm/看电影input typecheckbox nameinterest valuecode/敲代码input typecheckbox nameinterest valuegame/玩游戏/td/trtrtd alignright头像/tdtdinput typefile namephoto/td/trtrtd colspan2 aligncenterinput typesubmit value注册input typereset value重填/td/tr/table/form
/body
/html
