网站建设这个行业怎么样,wordpress酒店预订主题,建筑企业培训课程,响应式网站制作文章目录 一、基本了解二、HTML常用标签2.1 文本格式化标签2.2 列表标签2.3 超链接标签2.4 图片标签2.5 表格标签2.6 表单标签2.6.1 提交表单2.6.2 下拉表单2.6.3 按钮标签 2.7 布局标签 一、基本了解 网页组成#xff08;index.html页面#xff09;#xff1a; HTML标记语言… 文章目录 一、基本了解二、HTML常用标签2.1 文本格式化标签2.2 列表标签2.3 超链接标签2.4 图片标签2.5 表格标签2.6 表单标签2.6.1 提交表单2.6.2 下拉表单2.6.3 按钮标签 2.7 布局标签 一、基本了解 网页组成index.html页面 HTML标记语言组成网页架构的元素组件。比如页面左边放什么功能右边放什么输入框是整体框架。CSS 样式语言美化网页的样式。比如网页显示的字体颜色鼠标放在搜索框上有高亮显示等等。JavaScript 程式语言控制网页的动态效果。比如轮播图过几秒闪一次的效果。JQuery 程式语言协助及加强JavaScript的实现。在网页界面可以通过右击——查看网页源代码即可看到HTML内容。 网页代码结构 二、HTML常用标签 概念 HTML是一种用于创建网页的标记语言, 可以使用HTML创建网页用浏览器打开会自动解析。HTML是由标签和内容构成。 HTML代码结构 html
headtitle文档的标题/title
/head
body文档的内容...
/body
/html2.1 文本格式化标签
标签描述br/换行h1~/h1标题定义标题字体大小1最大6最小p…/p段落i…/i斜体cite/cite引用b…/b加粗strong…/strong强调加粗del/del删除线
1.示例代码。
!DOCTYPE html
html langen
headmeta charsetUTF-8title首页/title
/head
body
h1欢迎来到我的博客/h1
h4欢迎来到我的博客/h4
pHTML超文本标记语言——HyperText Markup Language是构成 Web 世界的一砖一瓦。/p
p它定义了网页内容的含义和结构。/p
p除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果如 CSS或功能与行为如 JavaScript。/p
i欢迎来到我的博客/ibr
cite欢迎来到我的博客/citebr
b欢迎来到我的博客/bbr
strong欢迎来到我的博客/strongbr
del欢迎来到我的博客/del
/body
/html2.查看效果。
2.2 列表标签
标签描述参数ul无序列表typedisc 默认实心圆square 实心方块circle 空心圆ol有序列表type1 默认数字其他值A/a/I/i/1li列表项目在有序列表和无序列表中用
1.不带参数。 2.带参数。
2.3 超链接标签 超链接标签格式a href“网址” /a 属性描述href指定链接跳转地址target链接打开方式常用值_blank 打开新窗口title文字提示属性name定义锚点
1.当前页面跳转。
a hrefhttp://www.baidu.com百度地址点击跳转/a2.新增窗口跳转。
a hrefhttp://www.baidu.com target_blank百度地址点击跳转/a3.定义描点实现点击底部按钮回到页面最开头。
!DOCTYPE html
html langen
headmeta charsetUTF-8title首页/title
/head
body
a nameqingjun/a ##添加此行自定义name名称。
......
......
a href#qingjun回到页面顶部/a ##添加此行引用name。
/body
/html2.4 图片标签 img src“图片文件路径”alt“图片提示” 属性描述alt图片加载失败时的提示信息title文字提示属性
1.加载图片添加图片相对路径。
img srcimg/4.jpg alt2.添加加载失败时的提示信息。
img srcimg/41.jpg alt加载错误2.5 表格标签
1.代码示例。
table border1 ##table:表格标签。thead ##thead:定义表格标题。tr ##tr:行标签.th主机名/th ##th:列名thIP/thth操作系统/th/tr/theadtbody ##tbody:定义表格内容tr ##tr:列标签tdwww.qingjun.cn/td ##td:列内容td192.168.1.10/tdtdCentOS7/td/tr/tbody
/table2.查看效果。
2.6 表单标签
2.6.1 提交表单 表单标签form/form表单项标签input注意可以不在from表单中使用但这种使用方式需要js获取值才能提交而在from表单中可以统一通过”提交按钮“提交数据。 表单属性描述action提交的目标地址(URL)method提交方式get(默认)和postenctype编码类型application/x-www-form-urlencoded默认值编码字符multipart/form-data传输数据为二进制类型如提交文件text/plain纯文本的传输
表单项属性描述typetext单行文本框password密码输入框checkbox多选框radio单选框file文件上传选择框button普通按钮submit提交按钮reset重置按钮name表单项名用于存储内容值value表单项的默认值disabled禁用该元素checked默认被选中值也是checked
1.示例代码。
form actionmethodpost,enctypemultipart/form-data用户名 :input typetext nameusernamebr密码 : input typepassword namepasswordbrp多选框 :br主机 input typecheckbox namehost disabledbr显示器 input typecheckbox namedisplayerbr鼠标 input typecheckbox namemousebr/p单选框 :br主机 input typeradio namecomputer checkedbr显示器 input typeradio namecomputerbr鼠标 input typeradio namecomputerfbrpinput typefilebrinput typebutton value普通按钮/inputbrinput typesubmitbrinput typereset/p
/form2.查看效果。
2.6.2 下拉表单 下拉列表标签select/select下拉列表选项标签option/option注意可以不在from表单中使用但这种使用方式需要js获取值才能提交而在from表单中可以统一通过”提交按钮“提交数据。 属性描述name下拉列表的名称用于存储下拉值disabled禁用该元素multiple设置可以选择多个项目size指定下拉列表中的可见行数
选项属性描述value选项值name默认下拉项
1.示例代码。
select nametest id multipleoption value电商项目 disabled电商项目/optionoption value大数据项目大数据项目/optionoption value在线教育项目在线教育项目/option
/select2.查看效果。
2.6.3 按钮标签 格式button type“submit”/bottontype可选值 button普通submit提交reset重置 注意可以不在from表单中使用但这种使用方式需要js获取值才能提交而在from表单中可以统一通过”提交按钮“提交数据。 1.示例代码。
button typebutton普通/botton
button typesubmit提交/botton
button typereset重置/botton2.查看效果。
2.7 布局标签 div标签用于在HTML文档中定义一个区块。div标签常用于将标签集中起来然后用样式对它们进行统一排版。 1.示例代码。
div stylecolor: red;background-color: azure;width: 200px;height: 200pxp这是段落。/pp这是段落。/pp这是段落。/pp这是段落。/p
/div
div stylecolor: blue;background-color: lightblue;width: 200px;height: 200pxp这是段落。/pp这是段落。/pp这是段落。/pp这是段落。/pp这是段落。/p
/div2.查看效果。
