HTML基础教学

2024/10/26 教程 HTML

HTML入门教程

HTML是什么

HTML是__HyperText Markup Language___的缩写，即__超文本标记语言__。它为我们提供了许多功能不同的__标签__，最终运行时由__浏览器__对标签进行解析，呈现出不同标签的样子。

基础语法 Basic program

注释
 //注释
也可使用快捷键Ctrl + /打出
基本框架

<!-- test -->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>

    <body>
        <!-- content -->
    </body>
</html>

解读:

文本标签

标签标题 <h1></h1>...<h6></h6>
超链接 <a></a>
段落标签 <p></p>
图片标签 <img src="图片地址"/>
换行 <br/>
标尺线 <hr/>
加粗 <b></b>

        <h1>标题一</h1>
        <a href="跳转链接">百度一下</a>
        <p>段落标签</p>
        <img src="img/lisa.jpg"/>
        <br />
        <hr />
        <b>END</b>

列表标签

无序标签 <ul></ul>
有序列表 <ol></ol>
列表项 <li></li>

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

表格标签

表格标签 <table></table>
表格中的行 <tr></tr>
表格的表头 <th></th>
表格的单元格 <td></td>

快速建表：table>tr4>td4 按Tab键（生成一个4行4列的表)

        <!-- table 表格标签 -->
        <!-- cellspacing 设置单元格与单元格之间的距离(外边距) -->
        <table border="1" width=400 cellspacing="0">
            <!-- tr表格中的行 -->
            <tr>
                <!-- th 表头单元格 居中加粗-->
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
            <tr>
                <td >张三</td>
                <td>84</td> 
                <td>87</td>
                <td>94</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>79</td>
                <td>88</td>
                <td>92</td>
            </tr>
            <tr>
                <td>小王</td>
                <td>79</td>
                <td>88</td>
                <td>92</td>
            </tr>
        </table>

biaoge

绘制表格时的一些常用属性:

- border 边框
- height 高度
- width 宽度
- align 内容水平方向的位置 (left,center,right)
- valign 内容垂直方向的位置 (top,middle,bottom)
- cellspacing 设置单元格与单元格之间的距离 (外边距)
- cellpadding 设置单元格内容到边框的距离 (内边距)
- bgcolor 背景颜色
- colspan 跨多列合并 (从哪个合并就在哪个单元格添加并删除多余的单元格)
- rowspan 跨多行合并 (合并完成后需要删除其他行多余的单元格)
————————————————

th 表头单元格中的内容是居中加粗的，td 普通单元格就没有此效果
表格中的内容只能放在单元格中.
绘制表格时必须要添加border边框属性，否则表格不会显示出来

表单标签

表单区域 <form></form>
单行输入框 <input/>

<input/>标签中提供了type属性，我们可以通过设置type的属性值来改变单行输入框的样式，如：

type = “ text “ 文本输入框
type = “ password “ 密码框
type = “ radio “ 单选框 (多个选项的name必须相同才能互斥)
type = “ checkbox “ 多选框

        <!-- form标签 表示一个表单区域 -->
        <form>
        账号:<input type="text" placeholder="请输入账号" />
             <br />
        密码:<input type="password" />
            <br />
        <!-- 注意:多选框和单选框的多个选项的name必须相同才能互斥 -->
        性别:<input type="radio" name="gender" />男
            <input type="radio" name="gender" />女
            <br />
        课程:<input type="checkbox" name="course" />政治
            <input type="checkbox" name="course" />语文
            <input type="checkbox" name="course" />数学
            <input type="checkbox" name="course" />英语
            <br />
        </form>

下拉选择框 <select></select>
选项内容 <option></option>

        籍贯<select>
                <!-- 选择性组件必须要给默认的value -->
                <option value="101">陕西</option>
                <option value="102">四川</option>
                <option value="103">浙江</option>
                <option value="104">湖南</option>	
            </select>

多行文本域 <textarea></textarea>

        <!-- 可设置文本域的大小(列和行) -->
        <textarea cols="30" rows="10"></textarea>

按钮钮依然写在<input/>标签中，只不过不同按钮的type属性不同

        <!-- 提交按钮，触发表单的提交动作 -->
        <input type="submit" value="提交"/>
        <!-- 重置按钮 -->
        <input type="reset"  value="重置"/>
        <!-- 普通按钮，用来绑定事件 (在JavaScript中会详细介绍) -->
        <input type="button" value="触发"/>

在HTML中使用CSS

CSS注释: /* */ (Ctrl + /)
在<head></head>标签中加入

    <style>
        /* CSS注释 */
    </style>

CSS样式表分为：行内样式表、内嵌样式表、外部样式表.
cssuse
简单来说就是css代码写的位置不同而已，如果标签只出现一次可以考虑使用行内样式写法。若有多组标签且样式需求一致可以使用内嵌样式写法。一般在大的项目css代码很多情况下才使用外部样式写法，也就是将css代码单独写在一个.css文件中，再在html文件中通过<link/>导入即可。

        <!-- href=" .css文件位置 " -->
        <link rel="stylesheet" href="" />

LOADING