HTML讲解(HTML结构及标签)
目录
1. HTML结构
1.1 HTML 基本结构
1.2 标签层次结构
2. HTML常见标签
2.1 注释标签
2.2 标题标签
2.3 段落标签
2.4 换⾏标签: br
2.5 格式化标签
2.6 图⽚标签: img
2.7 超链接标签: a
2.8 表格标签
2.9 列表标签
2.10 表单标签
HTML 特殊字符
1. HTML结构
1.1 HTML 基本结构
<html><head><title>第⼀个⻚⾯</title></head><body>hello world</body></html>
html 标签是整个 html ⽂件的根标签(最顶层标签)head 标签中写⻚⾯的属性.body 标签中写的是⻚⾯上显示的内容title 标签中写的是⻚⾯的标题.
1.2 标签层次结构
head 和 body 是 html 的⼦标签 ( html 就是 head 和 body 的⽗标签)title 是 head 的⼦标签. head 是 title 的⽗标签.head 和 body 之间是兄弟关系.
2. HTML常见标签
2.1 注释标签
< !-- 注释 -- >ctrl + / 快捷键 可以快速进⾏注释/取消注释.
2.2 标题标签
有六个, 从 h1 - h6. 数字越⼤, 则字体越⼩.<h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>
2.3 段落标签
<p>这是⼀个段落</p>
p 标签描述的段落, 前⾯还没有缩进
2.4 换⾏标签: br
br 是 break 的缩写. 表示换⾏。br 是⼀个单标签(不需要结束标签 ) 。<br/> 是规范写法. 不建议写成 <br> 。
2.5 格式化标签
<strong>strong 加粗</strong> <b>b 加粗</b><em>倾斜</em> <i>倾斜</i><del>删除线</del> <s>删除线</s><ins>下划线</ins> <u>下划线</u>
2.6 图⽚标签: img
img 标签必须带有 src 属性. 表示图⽚的路径.
当这个rose.jpg 和 html 在一个目录下,可以直接表示为 <img src="rose.jpg">
对于⼀个复杂的⽹站, ⻚⾯资源很多, 这种情况可以使⽤⽬录把这些⽂件整理好:1. 相对路径: 以 html 所在位置为基准, 找到图⽚的位置.同级路径: 直接写⽂件名即可 (或者 ./)下⼀级路径: image/1.jpg上⼀级路径: ../image/1.jpg2. 绝对路径: ⼀个完整的磁盘路径, 或者⽹络路径。例如磁盘路径 D:\rose.jpg⽹络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.pngimg 标签的其他属性:alt: 替换⽂本. 当⽂本不能正确显示的时候, 会显示⼀个替换的⽂字.title: 提示⽂本. ⿏标放到图⽚上, 就会有提示.width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设定.
代码示例:
1. 使⽤相对路径: 创建⼀个 image ⽬录和 html 同级, 并放⼊⼀个 rose2.jpg<img src="data:image/rose2.jpg" alt="">
2. 使⽤相对路径2: 在 image ⽬录中创建⼀个 html, 并访问上级⽬录的 rose.jpg<img src="../rose.jpg" alt="">3. 使⽤绝对路径1: 最好使⽤ / , 不要使⽤ \<img src="D:/rose.jpg" alt="">4. 使⽤绝对路径2: 使⽤⽹络路径<img src = "https:// images0.cnblogs.com/blog/130623/201407/300958475557219.png"alt="">5. 设置宽度和高度,边框<img src = "https:// images0.cnblogs.com/blog/130623/201407/300958475557219.png"alt="" width = "300px" heigth = "300px" border = "1px" >或者<img src = "https:// images0.cnblogs.com/blog/130623/201407/300958475557219.png"alt="" width = "30%" heigth = "300%" border = "1px" >
注意:
1. 属性可以有多个, 不能写到标签之前2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.3. 属性之间不分先后顺序4. 属性使⽤ "键值对" 的格式来表示
2.7 超链接标签: a
href: 必须具备, 表示点击后会跳转到哪个⻚⾯.target: 打开⽅式. 默认是 self. (当前页面打开此链接)如果是 blank 则⽤新的标签⻚打开.(新页面打开此链接)
链接的⼏种形式:
外部链接: href 引⽤其他⽹站的地址
<a href="http://www.baidu.com">百度</a>
内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可先创建⼀个 1.html <a href="2.html">点我跳转到 2.html</a>空链接: 使⽤ # 在 href 中占位.<a href="#">空链接</a>下载链接: href 对应的路径是⼀个⽂件. (可以使⽤ zip ⽂件)<a href="test.zip">下载⽂件</a>⽹⻚元素链接: 可以给图⽚等任何元素添加链接(把元素放到 a 标签中)<a href="http://www.sogou.com"><img src="rose.jpg" alt=""></a>锚点链接: 可以快速定位到⻚⾯中的某个位置.<a href="#one">第⼀集</a><a href="#two">第⼆集</a><a href="#three">第三集</a><p id="one">第⼀集剧情 <br>第⼀集剧情 <br>...</p><p id="two">第⼆集剧情 <br>第⼆集剧情 <br>...</p><p id="three">第三集剧情 <br>第三集剧情 <br>...</p>
2.8 表格标签
基本使用:
table 标签: 表示整个表格 。 table包含 tr , tr 包含 td 或者 th.tr: 表示表格的⼀⾏td: 表示⼀个单元格th: 表示表头单元格. 会居中加粗thead: 表格的头部区域(注意和 th 区分, 范围是⽐ th 要⼤的)tbody: 表格得到主体区域.
设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置。
这些属性都要放到 table 标签中.align: 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)border: 表示边框. 1 表示有边框(数字越⼤, 边框越粗), "" 表示没边框.cellpadding: 内容距离边框的距离, 默认 1 像素cellspacing: 单元格之间的距离. 默认为 2 像素width / height: 设置尺⼨.
合并单元格:
跨⾏合并: rowspan="n"跨列合并: colspan="n"
步骤:
1. 先确定跨⾏还是跨列2. 找好⽬标单元格(跨列合并, 左侧是⽬标单元格; 跨⾏合并, 上⽅是⽬标单元格)3. 删除的多余的单元格
2.9 列表标签
主要使⽤来布局的. 整⻬好看
⽆序列表[重要] ul li , . (ol : unorder list)有序列表[⽤的不多] ol li (ol : order list)⾃定义列表[重要] dl (总标签) dt (⼩标题) dd (围绕标题来说明) 上⾯有个⼩标题, 下⾯有几个围绕着标题来展开的。
注意:
元素之间是并列关系ul / ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 ddli 中可以放其他标签.列表带有⾃⼰的样式, 可以使⽤ CSS 来修改. (例如前⾯的⼩圆点都会去掉)
2.10 表单标签
分成两个部分:表单域: 包含表单元素的区域. 重点是 form 标签.表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.<form action="test.html">... [form 的内容]</form>
a. input 标签 : 各种输⼊控件, 单⾏⽂本框,密码框 ,按钮, 单选框, 复选框.
type:(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.value: input 中的默认值.checked: 默认被选中. (⽤于单选按钮和多选按钮)maxlength: 设定最⼤⻓度.
1. ⽂本框
<input type="text">
2. 密码框
<input type="password">
3. 单选框
性别:<input type="radio" name="sex">男<input type="radio" name="sex" checked="checked">⼥注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选⼀ 效果.
4. 复选框
爱好:<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <inputtype="checkbox"> 打游戏
5. 普通按钮
<input type="button" value="我是个按钮">
6. 提交按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"></form>提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
7. 清空按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空"></form>清空按钮必须放在 form 中. 点击后会将 form 内所有的⽤户输⼊内容重置.
8. 选择⽂件
<input type="file">
b. label 标签
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有⽤的)<label for="male">男</label> <input id="male" type="radio" name="sex">
c. select 标签
option 中定义 selected="selected" 表示默认选中<select><option>北京</option><option selected="selected">上海</option></select>
d. textarea 标签
<textarea rows="3" cols="50"></textarea>
e. ⽆语义标签: div & span
div 标签, division 的缩写, 含义是 分割 span 标签, 含义是跨度就是两个盒⼦. ⽤于⽹⻚布局div 是独占⼀⾏的, 是⼀个⼤盒⼦.span 不独占⼀⾏, 是⼀个⼩盒⼦.<div><span>咬⼈猫</span><span>咬⼈猫</span><span>咬⼈猫</span></div><div><span>兔总裁</span><span>兔总裁</span><span>兔总裁</span></div>
HTML 特殊字符
有些特殊的字符在 html ⽂件中是不能直接表示的, 例如:空格: ⼩于号: <⼤于号: >按位与:&
HTML讲解(HTML结构及标签)相关推荐
- 盘点一下结构体标签在Go中的应用
掌握了Go语言的朋友们应该都知道,在Go的结构体类型声明里面,字段声明后可以跟一个可选的字符串标签. type User struct {Name string `json:"name&qu ...
- go语言结构体标签的意义
如加入json解析格式 如下代码: package mainimport ("encoding/json""fmt""reflect" )t ...
- 【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
一.列表 1.有序列表 <ol>有序列表 order list <li>列表项</li> <li>列表项</li> </ol> ...
- html 表格,列表,表单,select和下拉选框,textarea多行文本域,label关联控件,表单,浮动框架,结构化标签
1. 表格 表格的语法 (1) table标签: 表示表格的开始和结束.表格的所有内容都需要写在这一对标签里 (2) tr标签: 表示表格中的一行 table row (3) td标签:要写在tr中, ...
- golang常用库之mapstructure包 | 多json格式情况解析、GO json 如何转化为 map 和 struct、Go语言结构体标签(Struct Tag)
文章目录 golang常用库之mitchellh/mapstructure包 | go将map转换为struct 一.msgpack 二.背景 三.多json格式情况解析使用思路 四.mapstruc ...
- C语言中结构体标签的使用
C语言中结构体标签的使用 我们都知道,结构体标签就是结构体的名称,为结构体命名可以方便我们在后续继续使用该结构体. 如 struct student {char* name;int age; }str ...
- 滚动屏幕显示隐藏div_HTML结构-常用标签:a·img·table·form·input·iframe·div
学习目标: 掌握html的结构,head与body的区别 掌握常用标签 掌握a标签,img标签 掌握table标签 掌握form标签,input标签 掌握iframe 和frameSet标签 掌握di ...
- html 的基本结构、标签(分类、关系)、文档类型、页面语言、字符集、语义化
结构代码 <!DOCTYPE html> <html><head> <meta charset="UTF-8"><title& ...
- html5改成块状标签,HTML5基本网页结构以及标签的改变
一.HTML5崭新的页面布局: 1.传统的HTML页面布局: 2.HTML5布局: 3.HTML5布局使用的标签: (1)header元素:header元素表示页面总的一个内容区块或者整个页面的标题: ...
最新文章
- Android:AS与Unity3D之间打包的各种坑及解决方案
- windows7 下vs2015使用opencv3.30、opencv_contrib库
- linux设备模型,bus,device,driver,实验遇到的问题
- 机器学习:SVM的最朴素代码实现,第一个变量遍历样本获得,第二个变量随机选择
- 信息学奥赛C++语言:装饰水果
- Keepalived实现双机热备
- 【网络小说推荐】纨绔才子
- SSH框架整合截图总结(三)
- Kubernetes 竞争条件漏洞的发现过程简述
- Java import javax.servlet 出错
- 多线激光雷达遇到的问题
- git merge 暂存区_经典好文:一篇文章,教你学会Git
- android信息实现,Android 信息分享实现
- STM32f1之光敏电阻传感器实验
- 完工后的决算书范本_竣工结算书样本.doc
- 在Kubuntu14.04中安装小企鹅输入法
- 某大型软件公司售前软件工程师面试题附答案
- FAF世链区块链大会|DarkHorse商学院院长何沐庭:看好DeFi的未来
- 【基于TCP的在线词典】
- matlab飞机大战小游戏(第二版)
热门文章
- ProxyPool 代理
- 13,12_基本运算,add/minus/multiply/divide,矩阵相乘mm,matmul,pow/sqrt/rsqrt,exp/log近似值,统计属性,mean,sum,min,max
- 古人的谦称、尊称与贱称
- 【低智版狗屁不通文章生成器】Python 基于一条语法随机生成简单中文句子的小练习
- 也谈把程序写好 —— 一点初级程序员的鄙见
- 填坑—c语言写单片机中断程序无法返回到中断点—解决办法
- Professional Microsoft Office SharePoint Designer 2007
- radmi4a Android,红米手机4A获取root超级权限的教程
- 图神经网络(GNNs)模型学习笔记与总结
- Linux-常用快捷键