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

一、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:代表样式
无序列表
    有序列表
  1. 列表项

    表格

    <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系统后端)

    1. 文本框
    2. 密码框
    3. 提交按钮 (value:按钮中的文字信息)
    4. 重置按钮
    5. 单选框
    6. 复选框
      (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,html5)