web学习笔记之我开始了html

白日梦想家1226
100 阅读5分钟

结构

html页面大概包括两个部分： head和body

head

包含文档的部分信息，如标题title，元信息meta

 <!--必要，网页标题-->
 <title>my_first_web</title>
 <!--必要，网页的编码方式,文件格式要与其声明相符-->
 <meta charset="UTF-8">
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <!--视口viewport，适配移动端-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!--网页关键词，SEO用-->
 <meta name="Keywords" content="my_homework" />
 <!--网页描述-->
 <meta name="Description" content="以无法为有法，以无限为有限" />
 <!--网页作者-->
 <meta name="Author" content="snailuu">
 <!--3s后跳转百度-->
 <meta http-equiv="refresh" content="3;http://www.baidu.com">
 <!--指定基础的路径，a链接以此为基准-->
 <base href="/">

也可以在head标签中引入css样式

 <!-- 嵌入方式 -->
 <head>
     <style>
         body{
             margin:0;
             padding:0;
             box-sizing: border-box;
         }
     </style>
 </head>
 ​
 <!-- 链接方式 -->
 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>

body

  • div、section、article、aside、header、footer
  • a
  • p
  • span
  • 表格：table、thead、tbody、tr、td
  • 列表：ul、ol
  • 表单：form、input、label、select、textarea、button

块盒元素

常见的有：div、p、h1~h6 、header、footer、nav、hr、ul、ol等

特点：

  1. 独占一行
  2. 可以设置宽高
  3. 宽度是父元素宽度100%
  4. 里面可以嵌套块级元素和行内元素

行内元素

常见的有：span、a、img、br、label、strong、audio, i等

特点：

  1. 不会独占一行
  2. 不能设置宽高
  3. 宽度等于内容宽度
  4. 不允许嵌套块级元素

a标签比就较特殊可以嵌套块级元素，将a标签转换为块级元素

行块盒元素

常见的有：input、button等

特点：

  1. 块级元素和行内元素的结合
  2. 可以设置宽高
  3. 宽度等于内容的宽度
  4. 不会独占一行

排版标签

  1. 标题使用<h1>至<h6>标签，可以使用align属性（对齐方式）：left、right、center
  2. <p>段落标签，单独成段，分割网页。有align属性
  3. <hr>水平分割线线标签
  4. <br>换行标签
  5. <div> 将多个内容组合成块盒元素
  6. <span>与div效果一样，但是组合成行盒
  7. <pre>格式化内容，里面内容不作任何处理（原始状态呈现）
  8. <!-- 注释效果 -->

字体标签

  1. 特殊字符：&nbsp; 空格，&lt; 小于号< ，&gt; 大于号>
  2. <u>下划线，<s>或<del>中划线，<i>或<em>斜体

超链接a

a标签用于页面的跳转，可以跳转到外部链接，也可以跳转到当前页面的某个锚点

 <!-- 外部链接跳转 -->
 <a href="https://www.baidu.com">百度一下</a>
 <!--设置锚点，必须是a标签-->
 <a name="a1" id="a1">a1点</a>
 <!--触发锚点-->
 <a href="#a1">去a1点</a>
 <!--跳转到a.html页面的a1锚点中去-->
 <a href="a.html#a1">去a1</a>

标签属性：

  1. href：目标URL

  2. title：悬停文本

  3. name：主要用于设置一个锚点的名称

  4. target：告诉浏览器用什么方式来打开目标页面

    target属性有以下几个值：

    1. self：在同一个网页中显示（默认值）
    2. blank：在新的窗口中打开
    3. _top：在顶级窗口中显示

图片标签img

<img src="图片的URL" />

标签属性：

  1. width、height：图片的宽高，如果只设置某一个属性，浏览器会自动进行等比例缩放

  2. alt：当图片无法显示时替代图片的文本

  3. title：鼠标悬停在图片上显示的文本

  4. align：图像相对于周围元素的对齐方式

    1. left：图像在左边
    2. right：图像在右边
    3. middle：图像在中央
    4. top：图像在顶部
    5. bottom：图像在底部（默认）

列表标签ul、ol

  1. <ul>无序列表，表数据无先后排列，前面默认用一个圆圈表示，可以通过修改list-style-type来修改不同的展示效果：

    1. list-style-type:disc 圆点（默认）
    2. list-style-type:circle圆圈
    3. list-style-type:square实心正方形

  2. <ol>有序列表，表数据之间可以看到明显的前后关系，可以通过修改type来修改不同的展示效果：

    1. 默认是阿拉伯数字
    2. type="A"大写字母
    3. type="a"小写字母
    4. type="I"大写罗马数字
    5. type="i" 小写罗马数字

表格标签table

表格在外面用<table>包裹后，里面由<caption>表格说明和若干行<tr>行构成，在每行之间由<th>或<td>构成

单元格：表格中的每一个数据块

table属性：

  1. align：表格中数据的对齐方式（left、right、center）
  2. border：表格的外边框，不包含单元格的边框
  3. style：border-collapse:collapse;，单元格的线和表格的边框线合并
  4. cellpadding：单元格的padding
  5. cellspacing：单元格之间的间隙
  6. dir：单元格内容的排列方式，lrt（左到右），rtl（右到左）

tr、td属性：

  1. dir：单元格内容的排列方式，lrt（左到右），rtl（右到左）
  2. bgcolor：单元格背景颜色
  3. align 一行的内容水平居中显示，取值：left、center、right
  4. valign 一行的内容垂直居中，取值：top、middle、bottom

单元格合并

  1. colspan：横向往右合并
  2. rowspan：纵向往下合并

表单标签form

常用的标签有：input、textarea、button、select、option、label、fieldset

input输入标签

属性：

  1. type：文本类型

    1. text 文本框（默认）
    2. password 密码框
    3. radio 单选按钮（同一组需要绑定相同的name）
    4. checkbox 多选按钮，根据name属性来作为一组进行选择，但id必须保证唯一
    5. hidden 隐藏框，在表单中不希望用户看见的信息
    6. submit 提交按钮，在form表单中默认按钮的类型，将表单信息提交到action属性中指定的页面
    7. reset 重置按钮，清空当前表单的所有内容，将其设置为初始内容
    8. image 图片按钮，和submit提交按钮的功能完全一致，但可以显示图片
    9. file 文件选择框，配合js对文件进行限制和检查

  2. checked：将单选按钮或多选按钮默认处于选中状态，用于<input>标签

  3. value： 文本框里的默认内容（一开始就有的）

  4. size：文本框允许显示的字符

  5. readonly：只读状态

  6. disabled：禁用状态

select下拉列表

在<select>标签中，每一项都是<option>

select属性：

  1. multiple：多选（Ctrl+鼠标左键点击）
  2. size：默认为1，大于1则列表显示size个数量

option属性：

  1. selected：预选中

textarea 多行文本框

不会忽略空格和换行符

属性：

  1. rows：文本框行数
  2. cols：文本框列数
  3. readonly：只读状态

fieldset表单分组

<fieldset>子标签<legend>定义组的标题

属性：

  1. disabled：禁用状态
  2. form：填写另一个表单的id，表示另外一个表单也是该表单的一部分
  3. name：fieldset名称

label

主要就是用于和input标签组合，使其点击文字或图片也可以进行选择

属性：

  1. for：label要绑定的id

avatar
文章
阅读
粉丝