HTML笔记

HTML初识


Hyper Text Markup Language(超文本标记语言)

用标签来描述网页的结构内容

HTML语法骨架:

<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<!-- 还可以插入其他meta、样式单等信息 -->
</head>
<body>
页面内容部分
</body>
</html>

<!-- 注意:不要在<html>和<head>之间插入任何内容
</head>和<body>
</body>和</html>
之间插入内容
-->

HTML 标签

HTML 元素

<p>This is a paragraph</p>
<a href="#">This is a link</a>
<br />
开始标签 元素内容 结束标签
<p> This is a paragraph </p>
<a href="#"> This is a link </a>
<br />

HTML 元素指的是从开始标签到结束标签的所有代码

HTML 元素语法
  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数HTML元素可拥有属性

排版标签

  • 标题标签
    • <h1></h1>
    • <h2></h2>
    • <h3></h3>
    • <h4></h4>
    • <h5></h5>
    • <h6></h6>

      注意: h1 标签因为重要,尽量少用,不要动不动就向你扔了一个h1。一般h1都是给logo使用,或者页面中最重要标题信息。

  • 段落标签

    <p>文本内容</p>
  • 水平线标签(horizontal)

    <hr />   
    <!-- 在html5里可以写成<hr>
    单标签(空元素)可以省略结束标签
    -->
  • 换行标签(break)

    <br />

    在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

    • div span标签

      <div></div><div></div>  <!-- 不在同一行 -->
      <span></span><span></span> <!-- 在同一行 -->

      <div>元素是块级元素,它是可用于组合其他 HTML 元素的容器。
      <div>元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

      <span>元素是内联元素,可用作文本的容器
      <span>元素也没有特定含义。
      内联元素在显示时通常不会以新行开始。


文本格式化标签

标签 作用
<b></b> <strong></strong> 粗体
<i></i> <em></em> 斜体
<s></s> <del></del> 删除线
<u></u> <ins></ins> 下划线

strong em del ins 语义更强烈


图像标签

<img src="图像的URL"
alt="图像不能显示时的替换文字"
title="鼠标悬停的显示内容"
width=""
height=""
border=""
/>

链接标签

<a href="跳转目标" target="定义被链接的文档在何处显示">文本或图片</a>
锚点定位

1.使用<a href="#(id名)">链接</a>创建一个链接。

<a href="#two">第二集</a>

2.使用相应的id名标注跳转的目标位置。

<h3 id="two">第二集</h3>

将 # id名添加到URL的末端,就可以直接跳转到指定页面的指定位置。


base 标签

···
<head>
···
<base target="_blank" />
<base href="http://www.w3school.com.cn" />
···
</head>
···

<base>标签为页面上所有链接规定默认地址或目标
标签必须位于 head 元素内部


列表标签

  • 无序列表

    <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    ···
    </ul>
  • 有序列表

    <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    ···
    </ol>
  • 自定义列表

    <dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ···
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ···
    ···
    </dl>

表格标签

<table>
<tr>
<td><td>
···
</tr>
<tr>
<td></td>
···
</tr>
···
</table>
表格属性
属性名 含义 默认值
border 表格边框 0px
cellspacing 单元格与单元格边框之间的距离 2px
cellpadding 单元格内容与边框的距离 1px
width 表格宽度
height 表格高度
align 表格在网页水平对齐方式 left(/center/right)
表头标签

表头单元格一般位于表格的第一行或第一列,其文本默认加粗居中。用<th></th>替换<td></td>即可将普通单元格换成表头单元格

表格结构
<table>
<caption>表格标题</caption>
<thead>
</thead>
<tbody>
<tr>
<td></td>
···
</tr>
···
</tbody>
</table>
合并单元格

跨行合并:rowspan
跨列合并:colspan

1.先确定是跨行还是跨列

2.根据先上后下,先左后右找到目标单元格

3.合并后删除多余单元格


表单标签

一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件:
包含了具体的表单功能项,如单行文本输入框、密码输入框、单选框、复选框、提交按钮、重置按钮等。

提示信息:

给用户看的信息

表单域:

一个容纳表单信息和表单控件的容器,可以定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法。没有表单域,表单中的数据就无法送达到服务器。

表单域
<form action="url地址" method="提交方式" name="表单名称">
<!-- 各种表单控件 -->
</form>
input标签

属性:
input

label标签
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

作用:在label元素里点击后会触发此控件,让浏览器将焦点转到label中for绑定的id的表单控件上

textarea标签(文本域)
<textarea cols="每行中的字符数" row="显示的行数">文本内容<textarea>
select标签(下拉菜单)
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
···
</select>

1.select元素中至少应包含一个<option></option>

2.在option 中定义select=”selected”属性时,当前选项为默认值。

© 2019 墨夜 All Rights Reserved.
Theme by hiero