html5入门1

最新推荐文章于 2024-05-31 22:20:16 发布

小修勾在学习嘛

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量148

点赞数

分类专栏： HTML5-走稳走好文章标签： html5

本文链接：https://blog.csdn.net/weixin_48713522/article/details/119118007

版权

HTML5-走稳走好专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

1.web的组成

结构 html/xhtml
表现 css
行为 js

2.制定语法标准

w3c :HTML/css
ECMA: js

3.html、xhtml、html5

1、HTML 指的是超文本标记语言 (Hyper Text Markup Language)
2、XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language) 是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。XHTML 元素必须被正确地嵌套，XHTML 元素必须被关闭，XHTML标签名必须用小写字母，XHTML 文档必须拥有根元素。
3、HTML5指的是HTML的第五次重大修改（第5个版本）(HTML5 是 W3C 与 WHATWG 合作的结果)，H5网络标准统一，可以跨平台，多设备使用，语义化比较强

4.文件命名规范

1.字母、数字、下划线组成，不能空格特殊字符、中文
2.字母开头，语义化命名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lbhrtvcW-1627303254165)(2021-07-20-11-58-04.png)]
1）首页index
2）列表 list
3）关于about

5.文件项目
1.css：修饰
2.js:数据交互
3.images
4.html

6.编辑器使用

6.1、文件夹添加到编辑器中

1.点击文件-将文件夹添加到工作区-选择文件路径
2.拖拽

6.2、编辑器的扩展插件

1.汉化插件 chinese
2.打开浏览器 open in browser
3.笔记 Markdown All in one 、Markdown Preview encode

6.3、如何用编辑器打开网页

1.点击HTML文件，输入英文！按tab键，出现html基本文件
2.在body内里输入内容，ctrl+s保存
3.打开浏览器alt+b

7.HTML的语法结构

7.1、标记的组成

1、标记名和属性的组成
标记的组成：单标记和多标记
a.单标记
<标记属性=“属性值” />
b.双标记
<开始标记> 属性=“属性值” 属性=“属性值” 属性=“属性值” </结束标记>
2、标记可以看作是包裹内容的盒子（装内容），属性的作用是给盒子制定功能的

7.2、标记的嵌套规则：

一层包裹：父子关系
多层嵌套：后代关系

7.3html的格式：

         <!DOCTYPE html>
    <!-- 声明文档类型  html  -->
    <html>
        <head>
            <meta charset="utf-8">
            <!-- charset属性定义网页的编码格式，防止中文乱码 -->
            <title></title>
            <!-- 文件的标题 -->
        </head>
        <!-- 网页的头部 -->
        <body></body>
        <!-- 网页的内容 -->
    </html>

8.其他内容

1.笔记保存后缀名为.md
2.笔记侧面显示的方式为单击右键选择打开侧边预览或者快捷键ctrl+k+v
4.添加注释快捷键ctrl+?

9.常用标记

1.单标记
<hr>：分割线 <br>：强制换行
2.自动换行
标题标签h1-h6(标题文字大小随数字增大依次减小)
3.不自动换行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-089Rww3j-1627303254170)(2021-07-20-18-14-04.png)]

特殊字符：
空格：&nbsp；
版权：&copy；
已注册：&reg；
商标：&trade；
小于号：&lt；
大于号：>

注意：标签的嵌套规则是自动换行的标记可以嵌套自动换行的，也可嵌套一行多个的标记。 p不可嵌套同类型的标记,h标签不能包裹自己

10.列表
列表分为有序列表、无序列表、自定义列表

1.有序列表

1.1 ol和li组成
1.2 格式：

<ol type="A/a/1/I/i  "  
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
 </ol>
 另外还需要注意的是：如果想跳顺序显示（比如从E开始显示，那就需要加上start="5"）
 即从第几位开始，start=相对应的数字序号

2.无序列表

2.1 ul和li组成
2.2 格式：

<ul type=""  
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
 </ul>

2.3 type的类型：

type=“disc” 实心圆
type=“circle” 空心圆
type=“square” 方形
type=“none” 没有
补充style=“list-style:none;”
使用css设置无序列表去除默认样式

3.自定义列表

3.1 dl、dt、dd组成
3.2 格式：

<dl>
<dt>自定义内容可以是图片也可以是文字</dt>
<dd>图片的描述</dd>
</dl>

11.插入图片

1.格式

<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片无法显示之后（路径错误）的提示信息">

alt有seo优化作用(提高网页排名)，浏览器引擎识别不了图片但是可以识别alt的值

2.路径分为两种

绝对路径：从磁盘开始
相对路径：从文件夹开始

注意：同级关系打开文件夹 =文件名/
返回上一层 = …/
当前文件夹 = ./
###12.超链接<a></a>相关属性
1.格式：<a href="地址" target="_blank">链接文本</a>

2.属性
2.1. href=“书写路径”
2.2. title=鼠标悬停上去之后的提示信息"
2.3. target=“设置窗口的打开方式”

target="_self"默认值，本窗口打开
target="_blank"新窗口打开

ps：超链接可以下载文件，不能下载视频

2.属性
2.1. href=“书写路径”
2.2. title=鼠标悬停上去之后的提示信息"
2.3. target=“设置窗口的打开方式”

target="_self"默认值，本窗口打开
target="_blank"新窗口打开

ps：超链接可以下载文件，不能下载视频

小修勾在学习嘛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5入门1

文章目录1.web的组成结构 html/xhtml表现 css行为 js2.制定语法标准w3c :HTML/cssECMA: js3.html、xhtml、html51、HTML 指的是超文本标记语言 (Hyper Text Markup Language)2、XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language) 是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。XHTML
复制链接

扫一扫