创建网站公司 徐州,制作网页推广宣传,11网站建设waocc,和硕网站建设HTML 大揭秘
什么是 HTML
HTML#xff08;Hyper Text Markup Language#xff09;#xff0c;中文译为超文本标记语言。其中#xff0c;我们需要注意两个关键词。一个是 超文本#xff0c;一个是 标记。所谓超文本#xff0c;就是将不同空间的文字信息通过超链接的方式…HTML 大揭秘
什么是 HTML
HTMLHyper Text Markup Language中文译为超文本标记语言。其中我们需要注意两个关键词。一个是 超文本一个是 标记。所谓超文本就是将不同空间的文字信息通过超链接的方式组织在一起的网状文本往简单了将就是我们说的链接。而标记的另一个名字也叫标签就是网页源码中带尖括号的文本。
常用语法
1. 标签
h1泡芙萝莉酱
/h1以上就是一个标签示例其中 h1 叫做 开始标签而 /h1 叫做 结束标签。
通过观察可以发现标签的主要特点分别是
标签成对出现标签中间包裹内容。标签由尖括号中加英文单词共同组成而这个英文单词就叫做标签名。相比于开始标签结束标签多了 /
此外标签还有不同的分类一类是单标签而另一类则是双标签。
单标签指的是那些只有开始标签没有结束标签的标签而双标签则是那些成对出现的标签。
2. HTML 基本骨架
htmlhead网页头部/headbody网页主题内容/body
/html以上就是 HTML 的基本骨架网页所有内容都包含在 html 标签中。网页中主要由头部 head 和主体 body 共同组成。其中头部用于存放给浏览器使用的信息比如 CSS 样式、JS 脚本。而网页主体则存放展示给用户的信息如图片、文字、视频等。
3. 标签之间的关系
各标签之间最主要的有两种关系一种是 嵌套关系一种是 并列关系而它们存在的意义就是让我们明确标签的书写位置让代码格式更加整齐提高代码可读性。
以基本骨架中的代码来说html 和 head 是嵌套关系而 head 和 body 之间的关系则是并列关系。
嵌套关系
htmlhead/head
/html并列关系
head/head
body/body4. 注释
注释就是对代码的解释说明存在的意义是让开发者能更加轻松地了解代码。一般是开发者在编码时为某些语句、程序段、函数等添加的提示从而提高代码的可读性方便其他开发者快速掌握也方便后续代码修改。
!-- 注释内容 --5. 标题
一般用在文章标题、网页区域名称、产品名称等共分为 6 级标题对应的标签分别是
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h6在日常使用时需要注意一个网页中 h1 一般只能使用一次而 h2~h6 则没有使用次数的限制。
6. 段落
一般用于文章段落、产品描述信息等。该标签会自动在其前后创建一些空白浏览器将自动添加这些空间。
p/p7. 换行 水平线
换行
br水平线
hr不同于其他双标签这两个标签都属于单标签用于实现文本换行和在文本中间添加水平线。
8. 文本格式化
可以给文本添加特殊格式比如加粗、斜体、下划线、删除线等效果。
加粗
b泡芙萝莉酱/b
strong泡芙萝莉酱/strong斜体
i泡芙萝莉酱/i
em泡芙萝莉酱/em下划线
u泡芙萝莉酱/u
ins泡芙萝莉酱/ins删除线
s泡芙萝莉酱/s
del泡芙萝莉酱/del9. 图片
为了在网页中插入图片可以使用图像标签其使用语法如下
img src图片地址其中src 属性用于指定图片位置和名称是 img 标签不可缺少的属性。
除开 src 属性之外 img 最常用的标签还有下表中的几个。
属性作用说明alt替换文本图片无法显示时展示的文字title提示文本鼠标悬停时显示的文字width设置图片宽度值一般是数字height设置图片高度值一般是数字
注意标签中存在多个属性时属性之间用空格隔开且没有先后顺序之分。
10. 超链接
通过使用超链接能够实现鼠标点击后跳转到其他页面的效果。
a href跳转页面地址/a其中href 是必需属性用于指定跳转的页面地址当 href 属性的值为 #则表示该链接为空链接点击后不会进行跳转。除此之外a 标签还有 target 属性用于指定是否在新窗口中打开跳转页面。当属性值为 _blank 时表示在新窗口打开。默认情况下表示在当前窗口打开。
11. 音频
使用该标签往网页中添加音频使用语法如下。
audio src音频地址/audio常见属性如下表
属性作用说明src音频地址必需属性支持 MP3、Wavcontrols是否显示音频控制面板loop是否循环播放autoplay是否自动播放
12. 视频
video src视频地址/video属性作用说明src视频地址必需属性支持 MP4、WebMcontrols是否显示视频控制面板loop是否循环播放muted是否静音播放autoplay是否自动播放必须在开启静音播放的前提下才能生效
13. 列表
用于布局内容排列整齐的区域主要分为无序列表、有序列表、定义列表。
1无序列表
ulliJavaPark/liliebooks/li
/ul用于布局排列整齐的无序规定顺序的区域语法为 ul 标签嵌套 li 标签其中 ul 标签表示无序列表而 li 则代表无序列表中的条目。需要注意 ul 标签中只能包裹 li 标签。
2有序列表
olliJavaPark/liliebooks/li
/ol用于布局排列整齐的规定顺序的区域语法为 ol 标签嵌套 li 标签其中 ol 标签表示无序列表而 li 则代表无序列表中的条目。而且需要注意 ol 标签中只能包裹 li 标签。
3定义列表
dldt开源项目/dtddJavaPark/ddddebooks/dd
/dl语法为 dl 嵌套 dt 和 dd 标签其中 dl 用于定义列表dt 用于定义列表标题dd 则用于定义列表的描述/详情。注意 dl 标签中只能包裹 dt 和 dd 标签。
14. 表格
类似于日常使用中的 Excel主要用于展示数据。注意默认情况下网页中的表格是没有边框线的需要使用border 属性添加。
标签说明table表格tr行th表头单元格td内容单元格
tabletrtd项目/tdtd链接/td/trtrtdJavaPark/tdtdhttps://github.com/cunyu1943/JavaPark/td/tr
/table为了让表格结构和语义更加清晰通常还是用表格结构标签用来划分区域。下表是表格结构标签的说明。
标签含义说明thead表格头部表格头部内容tbody表格主体主要内容区域tfoot表格底部汇总信息区域
合并单元格将多个单元格合并为一个单元格用于合并同类信息。又可以分为跨行合并和跨列合并合并步骤如下
保留最左最上的单元格添加属性值为数字表示需要合并的单元格数量 跨行合并保留最上的单元格添加属性 rowspan跨列合并保留最左的单元格添加属性 colspan
15. 表单
1input
用于在网页中收集信息。
input typetext根据标签中 type 属性的值不同从而具备不同的功能。
type 属性值说明text文本框用于输入单行文本password密码框radio单元框checkbox多选框file上传文件
为了在输入时更加友好可以在文本框和密码框中使用 placeholder 来进行提示。
针对单选框常用属性如下表。
属性作用说明name控件名控件分组一组只能选一个checked默认选中属性名和属性值相同简写为一个单词
input typeradio namegender checked男
input typeradio namegender女文件上传时默认上传表单控件只能上传一个文件如果要实现文件多选功能需要添加 multiple 属性。
input typefile multiple2下拉菜单
select 嵌套 option其中 select 表示下拉菜单整体而 option 则是下来菜单中的每一项selected 属性表示默认选中项目。
selectoptionJavaPark/optionoptionebooks/option
/select3文本域
用于输入多行文本的表单控件默认可拖拽。
textarea请输入评论/textarea4label
网页中对于某个标签的说明文本。一般可以用 label 标签绑定文字和表单控件的关系从而增大表单控件的点击范围。实现以上功能有两种方式
方式一label 只包裹内容不包裹表单控件。设置 label 的 for 属性值和表单控件的 id 属性值一致。
input typeradio idgame
label forgame游戏/label方式二用 label 直接包裹文字和表单控件此时无需设置额外属性。
labelinput typeradio游戏/label5按钮
属性值说明submit提交点击后将数据提交到后台默认功能reset重置点击后将表单控件恢复默认值button普通按钮默认无功能需要配合 JavaScript 使用
button typereset重置/button16. 布局
用于划分网页区域摆放内容实现网页布局。
1div
独占一行又叫大盒子。
2span
不单独另起一行又叫小盒子。
17. 字符
用于在网页中显示预留字符。
显示描述实体名 空格nbsp;大于gt;小于lt;
