首页 > 代码库 > HTML基础学习（二）

HTML基础学习（二）

2024-09-06 19:31:08   215人阅读

3.2

继续上一篇的HTML基础，在几年前制作网页是使用表格标签布局，现在很少使用了，基本是使用div布局

  • 表格：显示表格数据
<table>
    <tr>
       <th></th><!--文字居中加粗变大，起到表头作用-->
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
    </tr>
</table>
  • 常用属性：

     border: 给表格添加边框

     width:给表格设置宽度

     height: 给表格设置高

     cellspacing：规定单元格之间的空白。

     cellpadding：规定单元边沿与其内容之间的空白。

  • 表格中的其它标签： 
    <!-- <th></th>  起到表头的作用 
    <caption></caption> 给表格设置标题 
    <thead></thead>   用来存放当前列的表头
    <tbody></tbody>  一般用来存放页面中的主体数据
    <tfoot></tfoot>   用于设置表格的底部部分（一般情况不会出现  ）-->
  • 表单：用于收集表单元素中填写的信息，现在经常用于注册登录填写，搜索框之类
  • Input系列:由type属性决定元素有显示内容
  1. type = text:文本框(设置value属性可以给文本框设置默认值)
  2. type = password：密码框(设置value属性可以给文本框设置默认值)
  3. type = hidden:隐藏域(不常用)
  4. type = radio:单选框(设置checked属性可以设置默认选中项,通过设置多个单选框的name属性来让他们成为一个组，形成互斥效果)
  5. type = checkbox:多选框(设置checked属性可以设置默认选中项)
  6. type = button:按钮(设置value属性可以设置按钮的默认值)
  7. type = reset:重置(设置value属性可以设置按钮的默认值)
  8. type = image:图片按钮(设置src属性可以设置图片按钮的图片)
  9. type = submit:提交(设置value属性可以设置按钮的默认值)        
  • Select：下拉框
  • Option：设置下拉框选项，需要和select配合使用
  • 属性selected设置下拉框默认选项。

 

<select>
    <option>选项1</option>
    <option>选项2</option>
</select>
  • Textarea：文本域 
    <textarea></teatarea>

     

 

  • Form标签：用于管理所有的变单元素（控件） 
    <form>
        表单元素
</form>

     

  • HTML的空格合并现象：在html中内容中的同一位置不管写多小个空格、换行、缩进html在解析的时候都会按照一个空格来解析。如果需要使用，则需代码书写规范。

  • 特殊字符： 
    <!-- &nbsp;空格
       &lt;小于号
       &gt;大于号
       &copy;版权
       &amp:和号
       &yen:人民币
       &reg:注册商标
       &deg:摄氏度
       &plusmn:正负号
       &times:乘号
       &divide:除号
       &sup2:上标2
       &sup3:上标3-->

     

  • SEO：搜索引擎优化，可以提高页面在搜索工具中的排名。
  • 搜索引擎：在网络环境中，进行信息收集，然后提供用户搜索功能的平台
  • 常见做法：花钱买排名，广发外链，标签的语义化
  • 判断页面语义化程度: 让页面“裸奔”（去掉css）
  • 核心思想: 在合适的地方用合适的标签，让各个标签发挥其作用。
  • 意义:
  1. 对搜索引擎的友好
  2. 提升用户体验
  3. 利于代码的可读、维护、提高开发效率
  • 还有两个例外的标签，他们是没有语义的，常用来页面布局样式排版：

 

<div></div><!--块级元素-->
  • 特点：

 

  1. 在页面上单独占一行
  2. 如果不设置宽页面上默认占一行
  3. 通常作为容器布局的时候使用 
    <span></span><!--行内元素-->
  • 特点：
  1. 一行可以放多个
  2. 显示大小由内容来决定

HTML的基础大概就是这些，掌握好了之后学习后面更难的就会轻松很多。下面是关于CSS基础的一些知识点。

  • CSS的定义：层叠样式表（级联样式表） Cascading Style Sheets  ，是用来美化页面的。
  • CSS的书写位置：
  1. 内嵌式（内联）：是写在页面内部，处于head标签里面，在style标签里面书写。
  2. 外联式（外链）： 写在外部的css样式表，在HTML页面使用link标签调用，link标签书写在head标签里面。<link rel=’stylesheet’ href=http://www.mamicode.com/’外联式.css’>
  3. 行内式：写在元素的style属性中。
  • 语法结构： 
    选择器 {属性：值; ...}
  • 每个属性都有对应的值，这种形式称之为：键值对
  • Font属性：字体设置
  • font-style：控制字体是否斜体
  • 可选属性：
  1. normal        正常
  2. italic            斜体
  3. oblique       斜体
  4. font-weight：控制字体粗细
  • 可选赋值：
  1. normal        正常
  2. bold            加粗
  3. bolder         更粗
  4. lighter        细体
  5. 100 - 900(400相当于normal，700相当于bold)

注意：bolder和lighter会受到字体的限制，一般中文到达bold就是最大，并且一般中文没有细体

  • font-size：控制字体大小
  • 赋值方式：数字+长度单位（px）
  • font-family：设置字体
  • 可选赋值
  1. Microsoft yahei
  2. 宋体
  3. ...
  • font连写(font: font-weight、font-style、font-size、font-family)

特点：font-weight和font-style可以省略和调换位置

font-size和font-family只能固定位置，并且不能省略

  • color属性：字体颜色设置
  • 颜色赋值方式：
/*颜色单词：color:red;
十六进制表示法：color: #0094ff;
格式：# 两位红色 两位绿色 两位蓝色
rgb表示法：color:rgb(255,255,0);
格式：
rgb(红色比例，绿色比例，蓝色比例)
比例如果是数字，最小为0，最大为255
比例如果是百分比，最小为0%，最大为100%*/
  • Width和height：分别用来控制元素的宽高

今天就先这些啦~明天继续

 

HTML基础学习（二）


联系
我们