网安学习3--Web基础1 HTML

目录一.基础1.含义超文本标记语言2.标题通过-标签来定义3.段落4.链接5.图像二.属性1.HTML样式背景颜色2.字体颜色color3.字体font-family字体类型、font-weight字重、font-style斜体4.字体字号font-size字号5.文本居中对齐text-align6.统一更改三.HTML表格table border宽度tr (行标签)1.有序列表2.无序列表四.区块五.表单br--换行一.基础1.含义超文本标记语言2.标题通过h1-h6标签来定义h1这是一级标题/h1 h2这是二级标题/h2 h3这是三级标题/h33.段落pp这是一个段落标签/p主要用于将一段内容裹起来便于后期的统一设置p标签本身没有效果标签内的内容与标签外的内容空一行自动换行4.链接aa hrefhttps://www.baidu.com这是通往百度的地址/a5.图像imgimg srchttps://ts1.tc.mm.bing.net/th/id/OIP-C.cp5q40caHcx8116KPwemKAHaQD?w193h347c8rs1qlt90o6dpr1.3pid3.1rm2 width100 height100二.属性HTML元素可以设置属性属性可以在元素中添加附加属性属性一般描述与开始标签h1 stylebackground-color: #3875d7这是一级标题/h1属性总是以名称/值对的形式出现比如namevalueid#唯一的class.可同时多个1.HTML样式背景颜色h1 stylebackground-color: #3875d7这是一级标题/h1得到结果2.字体颜色colorh2 stylecolor: #570808这是二级标题/h2得到结果3.字体font-family字体类型、font-weight字重、font-style斜体h2 stylecolor: #570808; font-family: 楷体这是二级标题/h2得到结果4.字体字号font-size字号p stylefont-size: 20px这是一个段落标签/p5.文本居中对齐text-alignp stylefont-size: 20px;color: #006b1b;font-family: 新宋体;text-align: center这是一个段落标签/p6.统一更改class .!DOCTYPE html html langen xmlns:font-familiyhttp://www.w3.org/1999/xhtml xmlns:font-familyhttp://www.w3.org/1999/xhtml head meta charsetUTF-8 titleTitle/title style .demo{ text-align: center; color: #006b1b; font-family: 楷体; } /style /head body h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 /body /htmlid #TYPE html html langen xmlns:font-familiyhttp://www.w3.org/1999/xhtml xmlns:font-familyhttp://www.w3.org/1999/xhtml head meta charsetUTF-8 titleTitle/title style .demo{ text-align: center; color: #006b1b; font-family: 楷体; } #text{ text-align: center; color: #81d4fa; font-family: 新宋体; } /style /head body h1 idtext我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 /body /html得到结果h2!DOCTYPE html html langen xmlns:font-familiyhttp://www.w3.org/1999/xhtml xmlns:font-familyhttp://www.w3.org/1999/xhtml head meta charsetUTF-8 titleTitle/title style .demo{ text-align: center; color: #006b1b; font-family: 楷体; } #text{ text-align: center; color: #81d4fa; font-family: 新宋体; } h2{ font-family: 黑体; text-align: center; color: #003366; } /style /head body h1 idtext我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h1 classdemo我是一个标题/h1 h2二级标题/h2 h2二级标题/h2 h2二级标题/h2 /body /html三.HTML表格table border宽度tr (行标签)table border2 tr tdname/td tdsex/td tdage/td /tr1.有序列表h1有序列表/h1 ol li有序/li li有序/li li有序/li /ol2.无序列表h2无序列表/h2 ul li无序/li li无序/li li无序/li /ul四.区块div stylebackground-color: #570808;width: 200px;height: 200px我是第二个区块/div五.表单br--换行body form action#form表单账号:input typetext br 密码:input typepasswordbr#单选input typeradio namesex男 input typeradio namesex女br#多选input typecheckbox namevehicle valuemusic唱歌 input typecheckbox namevehicle valuecar汽车br#下拉选项select optgroup label湖南省 option长沙/option option岳阳/option /optgroup /selectbr#提交input typesubmit#重置input typereset /form /body得到结果