HTML学习笔记(基础部分)

时间:2022-11-18 00:08:09

 

一、基本概念

  1.HTML:超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言。

  2.HTML文档的后缀名:.html 或 .htm

  3.标签:由尖括号包围的关键词,比如 <html>

  4.元素:从开始标签(start tag)到结束标签(end tag)的所有代码。比如:< p>hello world< /p>   

  5.空元素:在开始标签中进行关闭。例如:换行 <br/>

  6基本格式

<!DOCTYPE html> //声明HTML5文档
<html>  //根元素
    <head>
            <!-- 元数据 -->
    </head>
    <body>
            <!-- 页面内容 -->
    </body>
</html>

   7.注释格式

    <!-- 注释内容 -->

二、HTML属性

      属性可以在元素中添加附加信息,一般位于开始标签,以键值对的形式存在。

      例如:<a href="http://www.baidu.com">百度一下</a>

    常用属性

      class为html元素定义一个或多个类名(classname)(类名从样式文件引入)

      id     定义元素的唯一id

      style规定元素的行内样式(inline style)

      title描述了元素的额外信息 (作为工具条使用)

 三、<head>标签

1.<title> 

<title>我是标题</title>

   <title>标签的作用:

    1.显示在浏览器工具栏上

    2.网页被收藏时默认的名字

2.<base> 指定了HTML文档中所有的链接标签的默认链接:

3.<link> 链接到样式表

例:从外部文件引入css样式

<link rel="stylesheet" type="text/css" href="css.css">

 4.<style> 添加css样式

5.<meta> 元数据

  5.1 为搜索引擎添加关键词,通过浏览器搜索这些关键词就能找到这个HTML文档

例:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

   5.2 描述网页的内容

例:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

   5.3 定义网页的作者

例:<meta name="author" content="Name">

   5.4 编码格式

例:<meta charset="utf-8">

 6.<script> 定义JavaScript脚本

四、<body>标签

  1.<h> 标签:标题

      6个级别:<h1> - <h6>

<!DOCTYPE html>
<html>
<head>
    <title>    </title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>    
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>   

   2.<hr> 标签:水平线

  3.<br> 标签:换行

  4.<p> 标签:段落

  5.文本格式化 

<b>加粗文本</b><br>
<strong>加粗文本</strong><br>
<big>文本放大</big><br>
<small>文本缩小</small><br>
<i>斜体文本</i><br>
<em>斜体文本</em><br>
<sub></sub><br><sup></sup><br>
<pre>空   格</pre>
<del>删除效果</del>

<!-- 计算机/编程代码样式 -->
<code>计算机输出</code><br>
<kbd>键盘输入</kbd><br>
<tt>打字机文本</tt><br>
<samp>计算机代码样本</samp><br>
<var>计算机变量</var><br>

<address>
    地址:石家庄 河北 中国
</address>
<p><bdo dir="rtl">倒叙显示</bdo></p> 

   6.<a> 标签:链接

<a href="http://www.baidu.com">百度一下</a>

   属性:在新窗口打开

    例:<a href="http://www.baidu.com/" target="_blank">百度一下</a>

  <a>标签的作用:

    1.链接:<a href="http://www.baidu.com">百度一下</a>

    2.锚:<a href="#tips">转到id为tips的部分</a>

  7.<img> 标签:图像

<img src="mayun.jpg" title="马云" alt="Ma Yun" height="140" width="121" >

     title属性:当鼠标放在图片上的时候显示的内容

    alt 属性:当图片加载失败的时候显示的属性

    height width属性:设置图片的高和宽

  8.<table> 标签:表格

    

    <table border="1">
        <caption>表格标题</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td></td>
        </tr>
        <tr>
            <td>貂蝉</td>
            <td></td>
        </tr>
    </table>

  常用标签:

    <table> 定义表格

    <caption> 定义表格标题

    <th> 定义表头(文本加粗)

    <tr> 定义行

    <td> 定义内容

  常用属性:

    border="1" 定义表格边框

    colspan="2" 跨2行

r    owspan="2" 跨2列

  9 <ul> <ol> 标签:列表

  9.1 <ul> 无序列表:用点标记顺序

       <ul>
          <li>咖啡</li>
          <li>牛奶</li>
      </ul>    

 

  9.2 <ol> 有序列表:用阿拉伯数字标记顺序

    <ol>
        <li>绿茶</li>
        <li>红茶</li>
    </ol>

    <ol> 属性:

    type="A"|"a"|"I"|"i"

  9.3 <dl> 自定义列表

    <dl>
        <dt>一级内容</dt>
        <dd>二级内容</dd>
    </dl>

   10.<div> 标签

    <div> 元素没有特定的含义,常用于文档布局。

  11<span> 标签

    没有特定的含义,用于为部分文本设置样式属性

  12<form> 标签:表单

    12.1 <input>

    <form>        
     <!-- 文本 --> <!-- value 属性值为文本框中的默认值 --> username:<input type="text" name="username" value="请输入用户名"><br> <!-- 密码 --> password:<input type="password" name="password"><br> <!-- 单选 --> <input type="radio" name="sex" value="male"><br> <input type="radio" name="sex" value="femail"><br> <!-- 复选 --> <input type="checkbox" name="language" value="Bike">Java<br> <input type="checkbox" name="language" value="Car">Python<br> <input type="checkbox" name="language" value="Car">JavaScript<br> <!-- 提交 --> <input type="submit" value="提交"> <!-- 重置 --> <input type="reset" value="重置"> </form>

   12.2 <select>

        <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="xian" selected>西安</option>
      </select>    

   13 <textarea> 多行文本

        <textarea rows="10" cols="10">
          默认文本内容
      </textarea> 

  14 <iframe> 标签:框架

  可以在同一个浏览器窗口插入其他HTML页面

<iframe src="http://www.baidu.com" width="900" height="300" frameborder="0"></iframe>

  

四、块级标签与内联标签

1.块级标签:自动地在元素的前后添加空行

     <div></div> <p></p> <h1></h1> <ul></ul> <ol></ol> <dl></dl>

2.内联标签

   <a></a> <img> <input> <span></span> <select></select> <textarea></textarea>