目录

一、 什么是HTML

二、编辑器

三、Html的基本骨架

四、html基本标签

h、p、img、a、audio、video、ul>li、ol>li、dl dd dt、span、div

一、 什么是HTML

Hyper  text  markup  language  超  文本  标记   语言

  1. 没有办法记录内容的样式（大小  颜色等）
  2. 通过给没有样式的文本加上标签的形式  让文本在网页中显示 具体的语义

二、编辑器

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

01、 sublime  （效率较高）

02、 DreamWeaver

03、 记事本

三、Html的基本骨架

 <!--文档类型声明：h5-->

 <!DOCTYPE html>

 <!--html文档开始-->

 <html lang="en">

 <!--html的头部  经常用来引入外部文件-->

 <head>

     <!--meta:元数据  -->

     <!--utf-8:国际通用字库 里面包含了所有国家的所有语言-->

     <!--gbk/gb2312:是国标字库  里面包含了中文  和少数外文-->

     <meta charset="UTF-8">

     <!--标题标签  显示在网页的标题栏-->

     <title>我的第一个页面</title>

 </head>

 <body>

 我是第一个页面

 </body>

 </html>

四、html基本标签

1、 标题标签

h  head line  标题的意思

<h1>~<h6>

<!--<h1> 我是标题</h1>-->
<h1>我是标题1号</h1>
<h2>我是标题2号</h2>
<h3>我是标题3号</h3>
<h4>我是标题4号</h4>
<h5>我是标题5号</h5>
<h6>我是标题6号</h6>

2、 段落标签

p paragraph

3、 图片标签

img   image

<img src="18.jpg" alt="图片加载失败" title="我贴了双眼皮贴">

4、a 标签

<!--a:   anchor 锚点标签-->

a标签跳转方式

01、 不同页面之间的跳转

<!--hyper  text reference ：超文本引入-->

<a href="22.html" title="我要走了 正如我亲亲的来">跳到22</a>

02、 跳转到外部页面

<a href="http://www.baidu.com" title="找度娘">百度</a>

03、 页面内部的跳转

-01、 从底部到顶部

<!--#号键代表占位符-->

<a href="#">去顶部</a>

-02、从一个点到另一个点

<a href="#here">去here</a>

<a name="here">Her在这 来找我呀</a>

5、路径

01、 相对路径

根据其中一个地址的改变  变化另外一个路径

同级：直接写路径

从外向内；一层层找有一层加一个  /

<a href="demo1/demo2/demo3/girlFriend.html">我单身要去找女朋友</a>

从内向外

<a href="../../../h2/money.html">我很穷  急需money</a>

6、媒体标签

 <title>音频标签</title>

</head>

<body>

<!--controls:控制器  添加控制器之后  才会让音频文件显示-->

<!--autoplay:自动播放-->

<!--loop 循环播放-->

<!--<audio src="../audio/2.mp3" controls autoplay loop>您的浏览器版本过低 扔了吧</audio>-->

<!--<h1>我是标题</h1>-->

<!--<img src="../imgs/8.jpg" alt="">-->

<video src="../video/1.mp4" controls>您的浏览器版本过低 请升级</video>

</body>

7、列表标签 (组标签)

01、无序列表

（unordered   list）<ul>

列表项   （list item）<li>

 <style>

        ul {

            list-style: none;

        }

        li {

            width: 100px;

            height: 50px;

            text-align: center;

            line-height:50px;

            color: #fff;

            float: left;

        }

        a {

            display: block;

            text-decoration: none;

        }

        a:hover {

            background-color: black;

            color: yellow;

        }

    </style>

</head>

<body>

       <!--<ul>-->

           <!--<li>南京</li>-->

           <!--<li>上海</li>-->

           <!--<li>西藏</li>-->

           <!--<li>敦煌</li>-->

       <!--</ul>-->

<!--ul>li*5-->

       <ul>

           <li><a href="#">首页</a></li>

           <li><a href="#">关于我们</a></li>

           <li><a href="#">企业简介</a></li>

           <li><a href="#">作品展示</a></li>

           <li><a href="#">合作咨询</a></li>

       </ul>
02、有序列表  ol   li
<h2>我喜欢的歌曲排行榜榜</h2>

<ol>

    <li>最炫民族风</li>

    <li>小苹果</li>

    <li>忐忑</li>

    <li>平凡之路</li>

</ol>
 

03、自定义列表

01、definition list  dl  定义列表

Definition  title    dt定义标题

Definition description   dd 定义描述词

 <dl>

    <dt>青岛</dt>

    <dd>虾 啤酒 </dd>

    <dt>新疆</dt>

    <dd>手抓羊肉  大盘鸡 饼</dd>

    <dt>澳大利亚</dt>

    <dd> 袋鼠 羊 龙虾</dd>

</dl>

8、span 和 div

01.、div ;  division  分割的意思

02、span  范围的意思

区别：

A、两者本身都有区域划分的意思，根据语义不具有任何样式产生

B、div 在 css 里面是块级元素，span是行内元素

C、div 在 HTML里面是容器级元素，span是文本级元素

文本级标签：里面可以放  文字  图片  表单元素

a  img  p  span

容器级标签：里面什么都可以放  包括自己

Ul li   ol li   dl dt dd   div

<style>

        div {

            width: 200px;

            height: 200px;

        }

        span {

            width: 200px;

            height: 200px;

            background-color: #0000ff;

        }

    </style>

</head>

<body>

   <div>

       今天阳光明媚

   </div>

  <span>

      今天多云

  </span>

   <span>

       <div></div>

   </span>

<p>

    <a href=""></a>

    文本

    <img src="" alt="">

</p>

</body>

9、表单元素 form

表单就是用来收集用户信息  让用户填写或者选择的

 <style>

        textarea {

            /*让文本域大小不可更改*/

            resize: none;

        }

    </style>

</head>

<body>

<form action="#" method="post">

    <p>

   <!--input:表示的是  输入的部件-->

        <!--type:表示这个表单的类型-->

        <!--text：表示的是文本框-->

        <label for="username">用户名：</label><input type="text" placeholder="请设置用户名" id="username" name="username" maxlength="4" autocomplete="on" autofocus required readonly>

    </p>

    <p>

        手机号：<input type="tel" placeholder="请输入手机号" name="tel">

    </p>

    <p><label for="password">密码：</label><input type="password" placeholder="请输入密码" id="password" name="password" required></p>

    <p>邮箱：<input type="email"></p>

    <p>出生日期：<input type="date"></p>

    <!--name:增加元素的互斥性-->

    <p>性别：<input type="radio" name="sex" value="男" >男

             <input type="radio" name="sex"  value="女" checked>女

             <input type="radio" name="sex"  value="保密">保密

    </p>

    <p>兴趣：

        <input type="checkbox" name="hobby" value="吃饭" checked>吃饭

        <input type="checkbox" name="hobby" value="睡觉" checked>睡觉

        <input type="checkbox" name="hobby" value="吃鸡">吃鸡

        <input type="checkbox" name="hobby" value="逛街">逛街

    </p>

    <p>

        所在地：

        <select>

            <option value="" >南京</option>

            <option value="">上海</option>

            <option value="">广西</option>

            <option value="" selected>西藏</option>

            <option value="">敦煌</option>

        </select>

    </p>

    <p>

        <!--cols:columns:列的意思-->

        <!--rows:行的意思-->

        <textarea  cols="30" rows="10" placeholder="备注："></textarea>

    </p>

    <!--按钮-->

    <input type="button" value="我是一个普通按钮">

    <input type="submit" value="提交">

    <input type="reset" value="重置">

    <button>h5按钮</button>

</form>

10、表格元素 <table>

表格的行   table  rows  <tr>

表格的数据   table   data  <td>

td

td

td

11、html的字符实体

<body>

<!--字符实体就是 用实际的字符来表示特殊的符号-->

   <!--<  less than   lt  <-->

   <!--> great than  gt >-->

   今天好开心呀 因为我们学了<h1>标签

  ©2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号

（版本号）

   <p>

       <!--  non-breaking spacing  空格的意思-->

       我看上      你好                        久了

   </p>

</body>

12、废弃标签

<body>

     <font size="30px" color="red">我是被废弃掉的</font>

    <u>给我加下划线</u>

    <b>我要加粗</b>

     <hr>

    <i>我要倾斜</i>

    <p>我很开心<br>认识你们</p>

      <p> <strong>我是强调加粗</strong>

          <em>我是强调倾斜</em>

          <del> 我是删除线</del></p>

</body>

(注：非原创，原作者：刘祥）

CSS学习笔记_day1的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. 八大排序算法——堆排序（动图演示 思路分析 实例代码java 复杂度分析）

    一.动图演示 二.思路分析 先来了解下堆的相关概念:堆是具有以下性质的完全二叉树:每个结点的值都大于或等于其左右孩子结点的值,称为大顶堆:或者每个结点的值都小于或等于其左右孩子结点的值,称为小顶堆.如 ...

  2. vue中computed、metfods、watch的区别

    一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...

  3. 浮点型数据转整型的丢失精度问题（C++）

    如下代码:http://ideone.com/xcgHgw #include <iostream> using namespace std; int main() { // your co ...

  4. Hibernate-----阶段总结

    Hibernate -----总结 一.在使用Hibernate的时候          首先我们要导入Hibernate类库,导入Hibernate压缩包中lib文件中required中的包     ...

  5. Spring学习之实例化bean的三种方式

    实例化bean的三种方式 构造器实例化bean Person.java public class Person { private String name; private Integer age; ...

  6. python之路-bytes数据类型

    一. python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分.文本总是Unicode,由str类型表示,二进制数据则由bytes类型表示.python 3不会以任意隐式的方式混用 ...

  7. Windows Server 2008 R2 服务器系统安装及配置全过程图文详解

    前言 本文主要介绍了 windows Server 2008 R2 服务器系统的安装及相关配置. 介绍的是以优盘的方式安装. 写这篇博文的目的一来是为了供有需要的网友参考, 二来自己也在此做个记载. ...

  8. springboot接收delete或者put方法体参数

    springboot默认配置了hiddenHttpMethodFilter(可以在springboot启动日志中看到) 因为hiddenHttpMethodFilter只会拦截get和post请求方式 ...

  9. spring boot 全局配置属性一览

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  10. Dictionary集合运用

    Dictionary基础定义: 从一组键(key)到一组值(value)的映射,每一个添加项都是由一个值及其相关联的键组成: 任何键都必须是唯一的: 键不能为空引用的null(VB中的Nothing) ...