前端基础学习笔记(html)1.0

最新推荐文章于 2024-06-11 20:41:15 发布

Colin.dang

最新推荐文章于 2024-06-11 20:41:15 发布

阅读量126

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43752310/article/details/104458722

版权

一、web标准

web标准是网页制作的标准，它不是一个标准，而是由一系列标准组成。

web标准包含了三个方面：结构（html），表现（css），行为（js）;

注：a) W3C——万维网联盟，制定了结构的标准和样式的标准

b)ECMA——欧洲电脑厂商联合会，制定了js相关标准

二、html相关概念

1.HTML——超文本标记语言（Hyper Text Markup Language）

2.XHTML——可扩展的超文本标记语言（Extensible Hyper Text Markup Language）

注：与html相比，并没有增加任何新的标签，只是语法要求更加严格

3.HTML5——html的第五次重大修改

三、常用快捷键

1.新建文件 Ctrl+N

2.打开文件 Ctrl+O

3.保存文件 Ctrl+S

4.另存为 Ctrl+shift+S

5.撤销 Ctrl+Z

6.恢复 Ctrl+Y

7.查找 Ctrl+F

8.快速转跳到第几行 Ctrl+G

9.在sublime中快速生成html模板 !+tab键

四、html基本结构

1.文档声明

作用：声明文档类型，告知浏览器使用哪种html或xhtml规范

h5的文档声明： <!doctype html> 或

2.网页的根元素(根标签)是html,html包含了两大部分：head部分和body部分，即：

<html>
      <head>
      ...
      </head>
      <body>
      ...
      </body>
</html>

a) head部分

head部分一般会设置字符编码，网站标题，关键词和描述，以及引入一些外部css文件和js文件

注：常用的编码格式UTF-8

b) body部分

所有需要在网页中显示的内容及放置内容的标记都要放在body部分

五、html基本语法

1.常规标记

语法：<标记属性=“属性值” 属性=“属性值”></标记>

eg:   <h1 class="box"  align="center">第一课</h1>

注：所有的标点符号必须是英文状态下的

2.空标记（单标记）

语法：<标记属性=“属性值” 属性=“属性值”>

eg:   <img src="1.jpg">

六、html常用标记

1.文本标题

语法： x为1~6

eg:   <h1>嘿嘿嘿</h1>

注：h1~h6字体逐渐减小，并且都有加粗

2.段落文本标记

语法：<p>段落文本内容</p>

3.转义字符（空格）

&nbsp;

4.强制换行

语法：<br>

5.加粗文本

语法：<strong>加粗文本</strong> 
      <b>加粗文本</b>

6.倾斜文本

语法：<em>倾斜文本</em>
      <i>倾斜文本</i>

7.水平分隔线

语法：<hr>

扩展：<sup>上标</sup>     
      <sub>下标</sub>
      <u>下划线</u>
      <del>删除线</del>

8.无序列表

语法：<ul>
         <li>hello</li>
            ...
      </ul>

9.有序列表

语法：<ol type="1|a|A|I|i"  start="1|数值">
          <li>world</li>
              ...
      </ol>

扩展： type设置有序列表符号的类型
start设置从几开始，默认为1

10.自定义列表

语法：<dl>
        <dt>名词</dt>
        <dd>解释...</dd>
             ...
      </dl>

相对路径的三种写法：

I.当当前文件和目标文件在同一目录下时，直接书写目标文件名称

eg:  <img src="p1.jpg">

II.当当前文件和目标文件所在文件夹在同一目录下时，目标文件所在文件夹名称/目标文件名

eg:  <img src="img/p7.jpg">

III.当当前文件所在文件夹和目标文件所在文件夹在同一目录下时，写法如下：

“…/目标文件所在文件夹名称/目标文件名称”

eg:  <img src="../img/p6.jpg">

注：…/代表返回到上一级目录

11.在网页中插入图片

语法：<img src="图片路径"  alt="文本">

eg:    <img src="1.jpg"   width="数值"   height="数值"   alt="好好学习">

注：width 设置图片的宽度
height 设置图片的高度
alt 图片加载失败时显示的替换信息，具有优化的作用

Colin.dang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习笔记(html)1.0

一、web标准web标准是网页制作的标准，它不是一个标准，而是由一系列标准组成。web标准包含了三个方面：结构（html），表现（css），行为（js）;注：a) W3C——万维网联盟，制定了结构的标准和样式的标准 b) ECMA——欧洲电脑厂商联合会，制定了js相关标准二、html相关概念1.HTML——超文本标记语言（Hyper Text Markup Language）2...
复制链接

扫一扫