HTML

1、什么是网页

也是一种协议,http
网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是HTML格式的文件,它要通过浏览器来阅读。
网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。

2、什么是HTML

HTML指的是 超文本标记语言 (Hyper Text Markup Language),它是用来描述网页的一种语言。HTML不是一种编程语言,而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。
所谓超文本,有2层含义:
1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
2.它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)

3、学习资源

MDN https://developer.mozilla.org/zh-CN/

4、web的标准构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

Web标准提出的最佳体验方案:结构、样式、行为相分离。
简单理解:结构写到HTML 文件中,表现写到CSS文件中,行为写到JavaScript文件中。
标准说明
结构结构用于对网页元素进行整理和分类,现阶段主要学的是HTML。
表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript

5、常用标签

<!DOCTYPE html> 声明为html5

<html></html>所有的内容都应该放在这个标签里面 

<head></head> 头部,不会显示在页面中(除了title标签),一般是一个页面的配置信息 

<body></body>显示在浏览中的再面,眼睛能见到的基本都body

<meta/> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<h1></h1>
---------
<h6></h6>  标题标签,1文字最大  6最小

<p></p>  段落标签,会换行,上下存在间距

<br/> 换行,单标签

文本格式化标签
<strong></strong>加粗
<em></em> 或 <i></i>倾斜
<del></del> 或 <s></s>删除线
<ins></ins> 或 <u></u>下划线

<div>:块级元素,宽度占满浏览器的宽度,标签用来布局,但是现在一行只能放一个<div>。大盒子
<span>:内联元素,宽度由内容决定,标签用来布局,一行上可以多个<span>。小盒子
    
<img src="图片路径" alt="图片不能显示时显示的文字" title="鼠标放在图片上提示的文本" width="宽度像素值" height="高度像素值" border="边框的粗细"/>  图片标签 ,当只修改高宽其中的一个时,他会同比例缩放。
 注:title是通用属性,即所有标签都拥有属性(还有id,class,style)

<a href="路径(为空时效果类似于刷新页面)" target="打开方式" download="当需要下载文件时才加这个属性,并且填写文件名"></a> 超链接标签,target用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。
    
锚点链接:<a href="#锚点名称"> 在需要滚动到标签添加 id="锚点名称" 如 <div id="锚点"></div>

<table>表格的包围标签
    <thead>表头
        <tr>
            <th></th> 带有加粗和居中的效果
        </tr>
    </thead>
    <tbody>表的内容
        <tr>表示一行
            <td></td> 表示一列
           </tr> 
        <tr>表示一行
            <td></td> 表示一列
           </tr> 
        <tr>表示一行
            <td></td> 表示二列
            <td></td>
           </tr> 
      </tbody>
</table>
跨行合并:rowspan="合并单元格的个数"
跨列合并: colspan="合并单元格的个数”



列表标签:
无序列表:
<ul>
    <li>1</li>
    <li>2</li>
</ul>
有序列表:
<ol>
    <li>1</li>
    <li>2</li>
</ol>

自定义列表
<dl>
    <dt>帮助中心</dt>
    <dl>咨询</dl>
    <dl>客服电话</dl>
    <dt>娱乐</dt>
    <dl>打牌</dl>
    <dl>下棋</dl>
</dl>

<form></form>
表单就是指form表单
子标签一般都称为表单元素常用的表单元素有哪些
input标签
    type属性
        text:文本输入框,默认值
        number:数字
        password:密码
        date:日期
        datetime:日期时间
        radio:单选按钮,value默认是on,以name名称相同为一组
        checkbox:复选框,value默认是on
        file:文件上传
    placeholder:提示内容
    id
    classs
    style
    title
    name:也是一个通用属性,给标签命名,可重复在表单中非常重要,与表单提交到后台程序有关
<select></select>标签
<textarea></textarea>标签:文本域
<button></button>标签:按钮
type属性
    button:普通按钮,没有特殊意义
    submit:默认是这个,提交按钮,提交表单,如果一个提单无法提交,则没有任何意义
    reset:重置按钮,将表单输入的内容清空

6、标签关系

标签关系图

7、常用路径的表示法

绝对路径和相对路径的一些表示法
"." --  表示当前目录,相对路径。

".." --  代表上一层目录,相对路径。 
 
"../../" -- 上一层目录的上一层目录,相对路径。 

"/" --  根目录,绝对路径。  

"D:/New folder/" --  物理路径,绝对路径

8、表格属性

表格属性QQ截图20201222085225

最后修改:2021 年 09 月 16 日 05 : 58 PM