HTML 基础

  1. HTML标题:是通过 <h1> - <h6> 标签来定义的.;其会因为数字变化而显示的字体大小变化;
  2. HTML段落:通过标签<p> 来定义的.
  3. HTML链接:通过标签<a>来定义的。
  4. HTML图像:通过标签 <img> 来定义的。

HTML 文本

HTML 标题

标题(Heading)是通过<h1> - <h6> 标签进行定义的.<h1> 定义最大的标题。 <h6>定义最小的标题。浏览器会自动地在标题的前后添加空行。

  • 标题很重要:

    不要仅仅是为了生成粗体大号的文本而使用标题,而是==为了用户可以通过标题来快速浏览您的网页应该将 h1 用作主标题==(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

HTML 注释

注释: 开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。。

<!-- 这是一个注释 -->

HTML 段落

浏览器会自动地在段落的前后添加空行。</p>是块级元素)

HTML 水平线

1:<hr>标签在 HTML 页面中创建水平线。

HTML 文本格式化

通常用到<strong><em><del>这几个标签。

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
</head>
<body>
    <!-- <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6> -->
    <!-- <h>标签有大小之分 -->
        <h2>五花山</h2>
        <p>我家住在大山里。你知道这里的山是什么颜色的吗?</p>
        <p>春天的山是绿色的,那绿色淡淡的,许多树叶刚冒出芽来,还带着嫩嫩的黄色呢。</p>
        <p>夏天的山也是绿色的,那绿色浓浓的,一片片树叶,不管是大的还是小的,都像被绿油彩涂过,连雨点落上去,都给染绿了。</p>
        <p>秋天的山不再是一种颜色了。下过一场秋霜有的树林变成了金黄色□好像所有的阳光都集中到那儿去了有的树林变成了杏黄色远远望去,就像枝头挂满了熟透的杏和梨;有的树林变成了火红色,风一吹,树林跳起舞来,就像一簇簇火苗在跳跃;还有的树林变得紫红紫红,跟剧场里的紫绒幕布的颜色一样。只有松柏不怕秋霜,针一样的叶子还是那么翠绿。</p>
        <p>秋天的山一片金黄,一片火红,一片翠绿……人们给这五颜六色的山起了个好听的名字,叫“<strong><em> <del>五花山</del></em></strong>”。</p>  <!-- 几个标签的嵌套 -->
         <strong>加粗</strong> <em>斜体</em> <del>删除文字</del><!-- <span>配合css</span> -->
</body>
</html>

效果:

HTML 图像

==HTML 图像-== :

  1. 标签( <img>)是空标签,意思是说,它只包含属性,并且没有闭合标签。
  2. 源属性(<src>)是图像的 URL 地址。分为本地和网上,本地图片写路径的时候注意绝对路径和相对路径(可以用../来返回 一级目录,返回几级目录就写几个它就行)。
  3. Alt属性:alt 属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,告用户图片的信息。==搜索引擎也是通过此描述来收集图片的==.
  4. 高度与宽度:height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。属性值默认单位为像素px。

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="1.png" alt="chumen的qq图像" title="chumen的qq图像">
</body>
</html>

图片的映射

目标是为了在一张图片上的某个位置点击后可以实现某个功能。

这需要用到usemap="#diyname" 然后用<map name="diyname"></map>标签来对应。

核心代码:`

    <area shape="" coords="" href="">

\\`

shape是选择的形状,coords是坐标,坐标确定推荐用qq的截图功能那里来确定,比如:

那这个彩色箭头指的位置就是在这个图像的(233,456)位置。

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片的映射</title>
</head>
<body>
    <img src="1.png" alt="" usemap="#1map">
    <map name="1map">
        <area shape="circle" coords="300,255,50" target="_blank" href="http://www.baidu.com">
    </map>

</body>
</html>

效果

HTML 超链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。使用标签 <a>来设置超文本链接。

  • HTML 链接语法:<a href="url">链接文本</a> ,href 属性描述了链接的目标。

  • target 属性 :target="_blank"效果就是在新窗口(空白界面)做出来 。

  • id 属性:id属性可用于创建在一个HTML文档书签标记,在HTML文档中插入ID:

    <a id="tips">有用的提示部分</a>

    在HTML文档中创建一个链接到”有用的提示部分(id=”tips”)”:

    <a href="#tips">访问有用的提示部分</a>

解释加补充:ID 属性名字只能有一个不可重复,且必须以==字母==开头,可以在一个界面的任何位置的内容进行设置ID,在设置完后,(<a href="# ">),在==“#”==后加入id的名称即可跳转到你设置ID的内容处。

<a name="end"></a> <a href="#end">end</a> 做锚点时,替换id的方法,作用可以实现一样!id不好用时用这个

练习:(为了方便阅读,省略了很多的<br>.)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>超级链接</title>
</head>
<body>
    <a href="http://www.mi.com" target="_blank"><img src="1.png"></a>
    <!-- /*书签标记:锚点*/ -->
    <a href="#end">end</a>
<br id="aa">
<br>
<br id="miao">
<br>
<br>
<br>
<a name="miao"></a>
<br>
<br>
<br>
<br>
 <a name="end"></a>
  <a href="#miao">miao</a>
</body>
</html>

HTML 列表

  • HTML无序列表<ul><li>其点的样式(圆圈,圆心,正方形)用css来控制<ul style="list-style-type:circle">
  • HTML 有序列表 <ol><li> 用法和无序相似,且有序与无序之间可以互相嵌套嵌套过程中点的形状也会自动变化。
  • HTML 自定义列表:这个是比较常用的,自定义列表以<dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd>开始。其不仅仅是一列项目,而是项目及其注释的组合。
<dl>
<dt>Coffee</dt>    <!-- 列表标题 -->
<dd>- black hot drink</dd>   <!-- 其内容 -->
<dt>Milk</dt> 
<dd>- white cold drink</dd>
</dl>

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <ul style="list-style-type:circle">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
    <dl>
        <dt>标题1</dt>
        <dd>自定义列表1</dd>
        <dd>自定义列表2</dd>
        <dd>自定义列表3</dd>
        <dd>自定义列表4</dd>
        <dt>标题2</dt>
        <dd>自定义列表1</dd>
        <dd>自定义列表2</dd>
        <dd>自定义列表3</dd>
        <dd>自定义列表4</dd>
    </dl>
</body>
</html>

效果:

HTML表格

  • HTML 表格:表格由 <table>标签来定义。每个表格均有若干==行==(由 <tr> 标签定义),每行被分割为若干==单元格==(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。这个有利于多样化,在分清栏目后在td里放内容就ok。

  • HTML 边框属性:<table border="1">会出现表框。

  • HTML 表格表头:表格的表头使用 <th> 标签进行定义。<th>标签与<td>标签用法相似只是显示的效果不同,会有粗体居中的效果;

  • HTML表格合并:用 colspan: 横向行 rowspan :竖纵行。

  • HTML表格单元格边距的设置:类似 设置边框 直接在table标签里放入cellpadding=“自定义的数字”,就设置好了。

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
         <tr>
           <th>部门</th>
           <th>姓名</th>
           <th>性别</th>
           <th>工资</th>
         </tr>
         <tr>
             <td rowspan="3">开发组</td>
             <td>小明</td>
             <td>男</td>
             <td>1w</td>
         </tr>
         <tr>
             <td>小白</td>
             <td>女</td>
             <td>1w</td>
         </tr>
         <tr>
         <td colspan="2">工资合计</td>
         <td>2w</td>
         </tr>
    </table>
</body>
</html>

效果:

HTML 表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

`


input元素

\\\\\`

HTML 表单 - 输入元素

输入标签<input>

文本域

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

`


First name:

Last name:

\\\\\`

在大多数浏览器中,文本域的缺省宽度是20个字符。

密码字段

<input type="password"> 来定义

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮

<input type="radio"> 标签定义了表单单选框选项。

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex"
value="female">Female
</form>

Name 是可以进行==分组==。想要有效果 value也少不了。

复选框

<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

类似单选三者缺一不可。

提交按钮

<input type="submit">定义了提交按钮.

<form name="input" action="" method="">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

==value:提交数据到服务器的值(后台程序PHP使用)写按钮时一定要写上。 name:为控件命名,以备后台程序 ASP、PHP 使用==

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action=""> <!-- action 中值为提交的网页 --><!-- 默认为get -->
        admin<input type="text" name="user">
        password<input type="password" name="password"> <br>
        <input type="radio" name="sex1" value="male">男 <br>
        <input type="radio" name="sex1" value="female">女  
        <input type="radio" name="sex">中性<!-- name中值一样那么其分组就一样 -->
        <!-- <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <input type="radio" name="sex">中性 -->
        <br>
        <!-- 兴趣复选框 -->
        <input type="checkbox" name="xq" value="kanshu"> 看书
        <input type="checkbox" name="xq" value="xuexi">  学习
        <input type="checkbox" name="xq" value="music">  听歌
        <br>
    城市<select name="city">
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
        </select>
        <input type="submit" name=""><br>
    </form>
</body>
</html>

效果:

HTML布局

HTML 布局 - 使用<div> 元素.

可以先分为头部div 底部div 和中间的div,然后逐步添加标签进行扩充,用css来设置样式。

这中间需要用到float:left等 来控制一个div中套用的div的位置。

  • HTML中<div>元素是块级元素,它可用于组合其他 HTML元素的容器。
  • <div> 元素的另一个常见的用途是文档布局。<div>元素经常与 CSS 一起使用,用来布局网页。
  • <div> 元素没有特定的含义。

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
</head>
<body>
    <!-- <div style="background: yellow; width: 50px;">
        这是个div这是个div这是个div这是个div
    </div> -->
    <div style="background: yellow;height: 100px;">导航</div>
    <div style="background: green;width: 20%; float: left; height: 300px;">菜单</div>
    <di+v style="background: red;width: 80%; float: left;height: 300px;">内容</div>
</body>
</html>

HTML嵌套规则

元素分类:

  • 文字类块元素:p h1~h6
  • 容器类块元素:div table tr td th form ul li ol dl dt dd
  • 行元素:不独立成行,不可以 内容决定a img input strong em del span
  • 特殊字符:br

规则

  • 块元素可以嵌套行元素 <div>这是div <a href="">这是a</a> </div>
  • 行元素可以嵌套行元素 <a href="">这是个<strong〉 a</strong>
  • 行元素不可以嵌套块元素
  • 文字类抉元素不可以嵌套块元素
  • 容器类抉元素可以嵌套块元素


学习记录

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!