html入门第一帖

最新推荐文章于 2025-10-02 22:38:24 发布

原创最新推荐文章于 2025-10-02 22:38:24 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

Html

超文本标记语言，搭建页面骨架
超级文本
文本：.txt 、文本，字符
超文本：图片、视频、音频、超链接、地图、统计图。。。。
标记语言

特点：
1.语法简单
2.容量小
3.功能强大
4.字符

计算机网络

01（二进制）=>（转换）字符
HTTP协议（超文本传输协议）=>（B/S）
url 统一资源定位符：定位网络中唯一的一个资源

          http://ip:port/path
          http://134.175.154.93:80/sms/start.html
    		 ip:134.175.154.93 	
                             主机 port:80 							    
  服务 apache   ：apache部署目录 /var/www/html/
                                path:/sms/start.html

Html编写

1）编写html代码（客户机）
2）测试html代码（客户机、浏览器）
3）部署发布

html版本问题

H5和H4和XHtml
html有三波人使用
1）W3C -> 制定标准
2）程序员 - > 使用html编写
3）浏览器厂商 -> 解析html文件

H5和H4的区别

1）结构

2）兼容性 h4 兼容性更好一些 h5主要用于webapp的开发手机打开网页（uc浏览器、微信分享链接、微信公众号、中国移动）

android  ->  google /chrome
ios  ->  safari

3）新增了很多新特性
语义化标签
表单input新增了type
画布 cavas
本地存储
缓存
定位。。。。

html的主体结构

<html lang="en">                  <!--根目录-->
     <head>                                   <!--头部 ->不会显示到浏览器视口中/用来设置或配置-->
            <meta charset="UTF-8">             <!--源信息 -> 告诉浏览器，我当前这个文档是使用utf-8编译的-->
            <title>第一个网页</title>                   <!--标题 -> 显示在浏览器选项卡中-->
            <link rel="stylesheet" href="style.css">               <!--导入外部文件（解耦）-->
            <style></style>                <!--html内部写css样式-->
            <script src="index.js"></script>               <!--导入外部JavaScript文件-->
     </head>
     <body>                             <!--主体-->
             <h1>one</h1>
             <p>hello</p>
             <div>first</div>
     </body>
</html>

编码：由编辑器编译（sublime ->utf-8）
utf-8（万国码） GBK（国标码） Big5（繁体字）
解码：浏览器

<meta charset="UTF-8">
       使用meta标签， 告诉浏览器我当前这个文档是使用什么编码方式编译的

语法
1）注释：

  <!--xxx-->
  1.记录编程思路
  2.增加代码量

2）元素：

<head>       <!--开始标签-->
  <title>这是我的第一个网页</title>       <!--子标签/内容-->
 </head>      <!--结束标签-->

3）属性：

<div 属性名=属性值 属性名=属性值>first</div>

属性一般添加在开始标签内，属性名与属性值通过“=”隔开，属性与属性通过空格隔开
3.1 核心属性
绝大多数元素都可以添加的属性
id 唯一
class 分类 <div class="box"></div>
title 描述
style 样式
取值为css规则
css规则键值对组成，键与值之间通过冒号隔开，规则之间通过分号隔开
style=“color:#333;background:#fff”
3.2 特有属性
某一些元素才可以添加的属性
img -> src、alt
a -> href 、target
3.3自定义属性（h5）
data-xxx

元素

1）块元素（box）（语义化）
-> 用于搭建页面框架
特性：
1）独占一行空间
2）默认宽度为父元素的100%，默认高度由子元素或者内容决定
3）可以为块元素指定高度和宽度
div 无意义的块元素
h1~h3 标题
->margin
font-size
font-weight
p
-> margin
ul/li
-> margin
padding
list-style
ol/li
-> margin
padding
list-style
dl/dt/dd
->dl ->margin
dd ->margin
html
body
-> margin
可以用来重置样式

h5新增的语义化标签
 nav   <nav></nav>

2）行内元素（inline）
-> 用于页面填充或者装饰