HTML学习笔记----华为WEB前端全栈成长计划（一阶段）

发布时间：2024-12-20 18:01

一、HTML概述

HyperText MarkUp Language “超文本标记语言”
不区分大小写

标签 <>

①标签一般成对存在，也可以单独存在
②标签可以嵌套
③标签连同它里面的内容构成元素
④标签内部可以带有多个属性，属性与值之间用“=”连接，属性先后顺序无关

二、HTML5文件结构

<!DOCTYPE html>          //文档类型：符合HTML5标准
<html   lang="en">  //lang属性：语言形式
  <head>        、- //头部：浏览器、搜索引擎所需信息
     <meta charset="UTF-8">  //meta:元数据 
                             //charset属性：字符集，字符编码方式
     <title> </title>
  </head>
  <body>         //主体：网页中包含的具体信息
  
  </body>
</html>

HTML编辑方式：
1、记事本
①新建文件夹
②新建文本文档，写入HTML文本结构
③修改文本文档后缀（.html)后保存运行
2、Sublime Text3 emmet插件
3、WebStorm (工程级别)

三、HTML基本标签

1、标题

(一个页面建议只有一个h1)

…

2、标签

段落内容

（无空格也不会换行）

段内换行
&nshop 空行
预留格式（保留空格和换行）
组合行内元素，以便通过CSS样式来格式化
水平线
注释 (可跨行)

文字或图片超链接
eg：

<a href="news.html">新闻</a>     // 链接到本站点的其他网页
<a href="http://www.baidu.com">百度</a>   //链接到其他站点，需要带有协议部分（http）！！
<a herf="#">板块二</a>    //虚拟超链接

插入图像
JPG：有损压缩，色彩丰富透明
GIF：简单动画、背景透明
PNG：无损压缩、透明、交错、动画
eg：

<img src="C:/site/logo.gif" />  //绝对路径
<img src="logo.gif" />   //相对路径

区域
align:代表样式
无序列表
有序列表
列表项

表格

<table   border="1">    border:边框属性
   <tr>
    <th>表头</th>
     <th>表头</th>
   </tr>
   <tr>
      <td>data</td>
      <td>data</td>
   </tr>
   <tr>
       <td>data</td>
       <td>data</td>
   </tr>
</table>

表单元素

表单元素

action：表示收集来的数据交由哪一个页面来处理(Web系统后端)

文本框
密码框
提交按钮 (value：按钮中的文字信息)
重置按钮
单选框
复选框
（value：表示要提交到后端的数据 name：表示当前这一下项它的名字 checked：表示该选项被默认选中）
7.下拉列表框

<select>
<option>选项1</option>
<option selected="selected" >选项2</option>
</select>

selected:默认被选中的那一项
Web语义化
内容 强调（斜体）
内容 重点强调（加粗）
自定义列表

<dl>                           //列表
   <dt>HTML</dt>               //列表项
      <dd>超文本标记语言</dd>   //描述
   <dt>CSS</dt> 
       <dd>层叠样式表</dd>
</dl>

HTML学习笔记----华为WEB前端全栈成长计划（一阶段）

一、HTML概述

二、HTML5文件结构

三、HTML基本标签

相关推荐