1

一:HTML基础
1.HTML简介:超文本标记语言
2.HTML基本组成

DOCTYPE 标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什m么样的文档类型定义来解析文档。 表示网页采用html5
(1)<html lang="">
lang(网页语言)属性值可以是"en"或"zh"
(2)<head></head>:网页配置项(包括title和meta)title是网页标题,meta设置网页关键词和描述。

title:文字显示在浏览器标签栏上。也是搜索引擎收录网站时显示的标题。
meta:meta(单标签)中的name属性具体功能有"Keywords"关键和"Description"描述。


charset属性值一般是UTF-8和gb2312(gbk)
区别如下图:

(3)<body></body>书写网页内容。该元素包含期望让用户在访问页面时看到的全部内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容
3.标签
(1)p标签:段落标签;p标签不嵌套h系列标签和p标签。写法:<p></p>
(2)h系列标签:"标题"语义,h1-h6,字号逐渐减小。
(3)div标签:实现文档区块分割
(4)区块标签

<section>文档区域;<article>核心内容;<aside>广告;<nav>导航条;<header>页头;<main>网页核心部分;<footer>页脚

(5)语义化标签

<span>文本中的"块"标签,结合CSS丰富样式;<b>加粗;<u>下划线;<i>倾斜;<strong>特别重要;<em>强调;<mark>让文字有黄色底色 <figure>和<figcaption>独立内容,配套使用

4.特性
(1)空白折叠现象(多个空格会看作是一个),标签内壁有多个空格也是会忽略。
(2)转义字符

&lt;小于号&gt;大于号&nbsp;空格(不会被折叠)&copy;版本符号

(3)注释:ctrl+/
5.多媒体
(1)图片标签
<img src="" alt="">
src后的属性值是图片的存储路径;因某种原因无法加载图片时显示alt文本;还可以设置width和height。、
网页支持的图片格式有:
.bmp 位图;.gif 动画;.jpeg(jpg) 照片;.png 便携式网络图像;.svg 矢量图;.webp 压缩算法。
(2)音频
<audio controls src=""></audio>
音频支持mp3和ogg,属性有loop(循环播放)、autoplay(自动播放);controls显示。
(3)视频
<video controls src=""></video>
支持mp4,ogv,webm;属性值有loop(循环播放)、autoplay(自动播放)。
6.超级链接
a标签
(1)

  <a href=""></a>

href支持相对路径(从网页出发,找到图片)和绝对路径(精准地址)
(2)在新窗口打开网页

  <a href="" target="_blank"></a>

(3)给图片加入超链接

  <a <img src="">></a>

(4)页面内锚点
给h系列标签添加id属性

  <h1 id="#top">返回顶部</h1>

(5)下载地址:指向exe,zip,rar等文件格式的连接,将自动成为下载链接
(6)邮件、电话链接

  <a href="mailto:"></a>
  <a href="tel:"></a>

7.表单标签
(1)格式
<form action=""></form>
(2)html5的input种类汇总
1>type属性值
color 颜色选择; data,time 日期,时间选择; email 电子邮件输入
file 文件选择;number 数字输入;range 拖拽条 nul 网址输入
datalist 备选项,“智能感应”
以上属性值的应用实践结果图如下:

2>input类型总结
text 单行文本框(value表示已经填好的值;placeholder表示提示文本,将以浅色文字写在文本框中,并不是文本框中的值;disabled表示用户不能与元素交互,即“锁死”)
radio 单选按钮(互斥的单选按钮应该设置它们的name值为相同值;单选按钮要有value属性,向服务器提交的就是value值;单选按钮如果加上了checked属性,表示默认被选中)
label标签:用来将文字和单选按钮进行绑定,用户点击文字时也视为点击了单选按钮。
checkbox:复选框
password:密码框
select:表示下拉菜单,option是它的内部选项
多行文本框:<textarea></textarea>,有rows属性和cols属性
(3)三种按钮

8.表格标签
(1)table:表格;tr:行;td:数据;th:每一列标题;caption:表格标题
(2)<thead>定义表头;<tbody>定义核心内容;<tfoot>定义表脚,通常是汇总行
(3)单元格合并
colspan:设置列跨度;rowspan:设置行跨度;也可以同时设置行列跨度
总结:对于HTML知识暂时梳理到这,之后还要勤加练习。


茶色岛
62 声望1 粉丝