html的基本使用

html 超文本标记语言 (Hyper Text Markup Language) 用来写页面内容,学习html就是学习html中的标签(标签：大多数是成对出现：开始标签 和闭合标签),   属性：lang="en"

一、基本元素

1.h1-h6：标签 h1是一级标签 h2是二级标签依次到h6，示例

    <h1>这是第1个标题</h1>
    <h2>这是第2个标题</h2>
    <h3>这是第3个标题</h3>
    <h4>这是第4个标题</h4>
    <h5>这是第5个标题</h5>
    <h6>这是第6个标题</h6>

效果：

2.img：图片

说到图片，我们要先说一下绝对路径和相对路径。

绝对路径：从根目录或者是网页上图片的路径直接调用。

相对路径：相对于当前文件夹下的位置 通过./ ../ 进行查找。（./是同级目录下，../是上一级目录下）

图片有两个属性（src是图片的地址（相对路径或绝对路径），alt是当图片加载失败的时候显示的文字内容）

   <img src="" alt="">

示例：（第一行用的是绝对路径，第二行是相对路径，第三行第四行是错误的路径）

   <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.BVpk8a1wXHK5rJWXqYWWMgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2" alt="彭于晏">
   <img src="./th.png" alt="彭于晏">
   <img src="./th" alt="彭于晏">
   <img src="https:" alt="彭于晏">

 效果：

3.div

相当于是一个容器，对页面进行布局（是块级元素）

示例：

  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>

效果：

 

 

4.span

相当于是一个容器，对页面进行布局（是行级元素）

示例：

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

效果：

 

5.a ：超链接文本

 a标签中的内容可以被点击进行跳转到指定页面，href中填入的是点击后跳转的页面，其中可以用#代替本页面,额外参数target="_blank"，写入后再次点击a标签的内容不会从当前页面进行跳转，而是打开一个新的窗口并跳转到指定页面

<a href=""></a>

 示例：
 

<a href="#">你好</a>

效果：

 

6.ol.li：有序列表

具有序号的列表标签ol和li进行嵌套

7.ul.li：无序列表

没有序号的列表标签ol和li进行嵌套，序号变成了小点点

示例：（上边是有序，下边是无序）

    <ol>
        <li>有序1</li>
        <li>有序2</li>
        <li>有序3</li>
    </ol>
    <ul>
        <li>无序1</li>
        <li>无序2</li>
        <li>无序3</li>
    </ul>

效果：

 8.strong：加粗字体

9.b：加粗且切重点

10.i：斜体

11.p：段落

示例：

   <strong>我是加粗</strong>
   <b>我是加粗且重点</b>
   <i>我是斜体</i>
   <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

效果：

 

 12.table tr td th元素，其中table是表格，th是表头元素，td是列，tr是行

示例：（boder是边框的意思）

    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <th>姓名</th><th>电话</th>
        </tr>
        <tr>
            <td>张三</td><td>15099992222</td>
        </tr>
    </table>
    <table border="1px">
        <tr><th>性别</th> <th>手机号</th></tr>
        <tr><td>男</td><td>9999999</td></tr>
        <tr><td>男</td><td>9999999</td></tr>
    </table>

 

13.按钮button

示例：

    <button>按钮</button>

 效果：

 

 二、行块元素

1、块级元素（  h1-h6  p ul li div）

快级元素是自己占一行

2、行级元素( a span strong b i)

行级元素是多个元素占一行

3 行元素不能设置宽高,  行级元素中不要放块级

三、表单元素

0.表单：form

form是创建一个表单，在form中才可以实现提交按钮

1.输入框：input中type是text的时候是一个输入框，placeholder是默认显示的值

       用户名： <input type="text" placeholder="YY">

 

2.密码框：type属性是password，当我们输入的时候会不显示输入内容，替换为小点点

       密码：<input type="password" placeholder="121212">

 

3.单选框（type是radio,值得注意的是，具有相同name属性的才具有单选框的特性，也就是选一个）

      <input type="radio" name="a">男
       <input type="radio" name="sex">女
       <input type="radio" name="sec">男
       <input type="radio" name="sec">女

 

4.复选框：type类型为checkbox时生效

      <input type="checkbox" name="hobby">烫头
       <input type="checkbox" name="hobby">打麻将
       <input type="checkbox" name="hobby">敲代码

 

5.下拉框在select标签中添加option选项，可以对选项使用selected进行设置初始的默认选项

      <select>
        
           <option value="理工">理工</option>
           <option value="">黑大</option>
           <option value="">林大</option>
           <option value="">黑工程</option>
           <option value="" selected>哈工大</option>
       </select>

  

 

6.提交按钮：注意在form标签中使用

     <input type="submit">

 

7.文本域：一块输入框，大小可以拖动

     <textarea></textarea>