目录

一、 什么是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. gitlab安装随记

    gitlab安装 配置yum源 sudo vim /etc/yum.repos.d/gitlab-ce.repo 按照网上别人的例子,修改为清华的源 [gitlab-ce] name=Gitlab C ...

  2. MVP技术沙龙上海站-SQL BI

    5月,微软爱好者们齐聚一起,在上海港汇中心,参加<MVP技术沙龙上海站-SQL BI>系列讲座,下面是现场图片.  

  3. Java内存溢出优化性能优化

    高性能应用构成了现代网络的支柱.LinkedIn有许多内部高吞吐量服务来满足每秒数千次的用户请求.要优化用户体验,低延迟地响应这些请求非常重要. 比如说,用户经常用到的一个功能是了解动态信息——不断更 ...

  4. springmvc核心技术

    目录 异常处理 类型转换器 数据验证 文件上传与下载 拦截器 异常处理 Spring MVC中, 系统的DAO, Service, Controller层出现异常, 均通过throw Exceptio ...

  5. 怎么在多场景下使用不同的 git 账号 commit

    应用场景 我有多个github的账号,不同的账号对应不同的repo,需要push的时候自动区分账号 我有多个git的账号,有的是github的,有的是单位的gitlab的,不同账号对应不同的repo, ...

  6. React 实战系列：模块化

    本系列以实战为主,通过一个 TODO 应用来学习深入 React. 学习无捷径,唯一的办法就是 coding!coding!coding! 如有不足之处,欢迎大家批评指正,共同进步! 言毕,开始撸

  7. 活代码LINQ——06

    一.模块代码 ' Fig. 9.4: LINQWithArrayOfObjects.vb ' LINQ to Objects using an array of Employee objects. M ...

  8. perceptual loss

    https://arxiv.org/abs/1603.08155 两个网络:image transfer网络和loss网络 image transfer网络: 将输入图片y通过映射f W (x)得到输 ...

  9. mybatis支持jdk8等localdate类型

    大家知道,在实体Entity里面,可以使用java.sql.Date.java.sql.Timestamp.java.util.Date来映射到数据库的date.timestamp.datetime等 ...

  10. erlang二进制

    在Erlang中写处理二进制数据的代码是洋溢着幸福感的,它对于二进制强大的表现力甚至能让你忘掉了它种种不便,今天我们说说Erlang的二进制数据处理. Erlang中bit string代表无类型的内 ...