html第一天学习笔记

最新推荐文章于 2024-08-20 19:23:57 发布

洛洛的学习时光

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量62

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45808482/article/details/107870733

版权

第一课
学习目标：用HTML+CSS布局出3wc的网页
浏览器内核——web标准——html认识——开发工具——文档类型——字符集——常用标签——路径

能说出web标准三层组成：结构（strcture）——表现（presentation）——行为（behavior）

结构：主要学html 网页元素
表现：外观样式css
行为:交互javascript

html

理解
1 html的概念
2 html标签分类
3 html标签关系
4 html标签语义化
应用
html的骨架格式
sublime基本使用

html是超文本标记语言，

<img src="timg.gif"/> 插入图片

**html的骨架标签**
<html> </html> 根标签
<head> </head> 头部标签 
<titile> </titile> 网站标题
<body> </body>文档内容和主体

结构如下：

<html>
       <head>
       <titile></titile>
       </head>
       <body>
       </body>
</html>

html标签的分类
双标签成双成对的
空元素（单标签）
换行

**html标签关系**
<head>
	<titile> </titile>
</head>

heady与titile是嵌套关系，也就是父子关系，包含关系
（嵌套关系的子集，写法按一下tab键，四个空格的大小）

head与body是并列关系
并列关系上下对齐

文档类型
<!DOCTYPE html>必须加到html前边去

<html	lang="en">页面语言  zh-CN表示中文

字符集
多个字符的集合
gb2312 国标简体中文
UTF-8

<meta	charset="UTF-8">在head下，title上边

html的常用标签

 <h1>文本</h1> 一级标题
 <h2>文本</h2> 二级标题
  <h3>文本</h3> 三级标题
  <h4>文本</h4> 四级标题
 <h5>文本</h5> 五级标题
  <h6>文本</h6> 六级标题

 <p> </p>

<hr />
4. 换行标签 break

```

文本格式化标签

<b></b> 加粗标签

<strong> </strong>加粗标签（推荐用后者）

<i> </i>  <em> </em> 倾斜标签 （推荐用后者）

<s> </s>  <del> </del>删除标签（推荐用后者）

<u> </u> <ins> </ins> 加下划线（推荐用后者）

标签属性
<手机颜色=“红色” 大小=“5寸”> </手机>

图像标签

<img src="图像URL"/>

src 图像的路径
alt 图像不能显示时的替换文本
title 鼠标放在图片上提示文本
width 宽度
height 高度
宽度高度只改一个就行
border 设置边框

链接标签

<a   href="跳转目标"    target="目标窗口弹出的方式"> 文本或图像</a>

外部链接需要添加http格式
内部链接

<a href="链接.html"> 内部链接</a>

#为空链接，在没有想好放哪个链接时可先设置为空链接

<a href="#">空链接</a>

target
在链接后边加上 target="_blank" 表示在新的网页打开链接
如代码写法

<a  href="http://www.baidu.com   taget="_blank">百度一下</a>

self为默认的打开方式，在当前标签打开

注释标签

<!--注释内容-->

注释标签的内容是不会显示到标签页面中去的
注释的快捷键是ctr+？

路径
目录文件夹：
根目录：
相对路径和绝对路径
相对路径分为：1-同一级路径 2-下一级路径 3-上一级路径

  同一级路径：timg.jpg

  下一级路径：images/timg.jpg/

上一级路径用 ../images/timg.jpg

绝对路径：、

锚点定位
看某个地方迅速跳转到某个地方

选择跳转的地方，给其命名例如：<h2  id="tree">圣诞树的由来</h2>

找到要点击的地方 如：<a href="# tree"/>圣诞树 </a>

关注