HTML基础知识点

周开心
183 阅读3分钟

做网站：前端（眼之所及，皆是前端）+ 后端（服务器）

  • 前端与移动学科：学习三块内容 html(结构) + css（样式） + javascript（行为）
  • 后端：java,.net, php, python,go,node.js...

网页开发：html+css## 二.常见的浏览器

360浏览器 ，google+chrome, 火狐

在浏览器中有一个内核来解析代码

内核又可以分：渲染引擎（html+css）+ 解析引擎(javascript)

三.html( hyper text markup language)页面结构

<html>
    <head>
        <title>这里写标题</title>
    </head>
    <body>
        这里写内容
    </body>
</html>

快速生成页面的结构快捷键： !+tab

四.标签的分类

  • 双边标签 如： html body h1 p a ul li table tr td form div span
  • 单标签 如： br hr img input link

五.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是h1标签 ，最大最粗</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h3标签</h4>
    <h5>这是h3标签</h5>
    <h6>这是h3标签</h6>
    ------------------
    <h7>没有h7标签</h7>
</body>
</html>

六.段落标签p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一个p标签，我的英文是paragraph</p>
</body>
</html>

七.常见的样式标签

  • 粗体 strong b(bold) font-weight: bolder (700)
  • 斜体 em i (italic) font-style: italic
  • 删除 del(delete) s text-decoration: line-through
  • 下划线 ins u(underline) text-decoration: underline

八.图片标签img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 可以放网络地址 -->
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587997176561&di=083ebf276b4e629090c5d9495e9fd67e&imgtype=0&src=http%3A%2F%2Fwww.yoka.com%2Fdna%2Fpics%2Fba1caebb%2F375%2Fd35cc3a93b133717d51.jpg" alt="">
​
    <!-- 也可以放本机的地址 -->
    <img src="./3.png" >
</body>
</html>

img标签常见的属性：

  • src: 指定图片的地址
  • alt: 指定图片不存在时显示的文字
  • title: 鼠标悬停在图片时显示的文字
  • width: 设定图片的宽度
  • height: 设定图片的高度
  • border: 设定图片的边框

最主要的属性是src，其余的属性用的比较少

九.路径

路径的分类：相对路径与绝对路径

相对路径分两种：

  1. 相对于自身 ------ “./”
  2. 相对于父级 ------ "../"

绝对路径与操作系统有关：（不建议使用绝对路径）

  • windows操作系统：如 “c://windows/temp/xxx.png”
  • linux或macOS 系统： 如："/bin/xxx"

十.链接

1.a标签实现页面的跳转

a标签常用的属性：

  • href :跳转的路径值
  • target：是否开启新窗口 _self在当前窗口 _blank打开新窗口
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 外部链接 -->
    <a href="https://www.baidu.com" target="_self">百度</a>
​
    <!-- 内部链接 -->
    <a href="./05-路径.html" target="_blank">05文件</a>
</body>
</html>

2.锚点anchor --- 页面快速定位，路由...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 点击信息展示，能快速定位到id为info的地方 -->
    <a href="#info">信息展示</a>
​
    <h3 id="info">我的信息</h3>
</body>
</html>

十一.表格

作用：用来展示数据的，不是用来页面布局的

1.基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table：表格   tr: 一行   td:当前第的一列 -->
    <table border="1" align="center" width="200" cellpadding="10" cellspacing="0" rules="all">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>肖卅</td>
            <td>18</td>
            <td>你猜</td>
        </tr>
        <tr>
            <td>林志玲</td>
            <td>45</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

2.table的常用属性

  • border: 边框
  • align: 居中左右效果
  • width: 宽度
  • height: 高度
  • cellpadding: 单元格内边距
  • cellspacing: 单元格外边距
  • rules:"all" 合并单元格border宽度

3.表格的完整结构

注意：浏览器会自动给table中加入tbody标记。

完整的结构：可以加标题capation, thead>tr>th tbody>tr>td 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" align="center" width="400" height="300" cellpadding="10" cellspacing="0" rules="all">
        <caption><h2>你感兴趣的名星列表</h2></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>林志玲</td>
                <td>45</td>
                <td>女</td>
            </tr>
            <tr>
                <td>邓紫棋</td>
                <td>28</td>
                <td>女</td>
            </tr>
            <tr>
                <td>肖战</td>
                <td>25</td>
                <td>男</td>
            </tr>
            <tr>
                <td>肖卅</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

4.合并单元格

rowspan:行合并 colspan（col是单词column的缩写）:列合并

Document table{ text-align: center; }

这是表格的标题
1 3
4 这是一个长长的文字，相当的长
7 8

十二.两个常用的布局标签

  • div: 区域

特点：独占一行

  • span

特点：不是独占一行，里面写一些文字

十三.列表

  • 无序列表 (重点关注)
  • 有序列表
  • 自定义列表

1.无序列表（ul>li）(unordered list > list item)

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <!-- emit语法: ul>li*3 -->
    <ul>
        <li>标题1</li>
        <li>标题2</li>
        <li>标题3</li>
    </ul>
</body>
​
</html>

2.有序列表 （ol>li）(order list > list item)

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <!-- emit语法: ol>li*3 -->
    <ol>
        <li>这是第一项</li>
        <li>这是第二项</li>
        <li>这是第三项</li>
    </ol>
</body>
​
</html>

3.自定义列表（dl > dt+dd）(defined list > defined title + defined detail)

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <dl>
        <dt>这是头部</dt>
        <dd>这是第一项</dd>
        <dd>这是第二部分</dd>
        <dd>这是最后一部分</dd>
    </dl>
</body>
​
</html>

十四.表单form

作用：收集用户的数据提交给服务器

常用的表单类型：type

  • text: 文本输入框
  • password:密码框
  • radio: 单选框
  • checkbox: 复选框
  • submit: 数据提交按钮
  • button: 普通按钮
  • file: 文件上传按钮
  • hidden: 隐藏域

两个特殊的元素：

  • select>option:下拉框
  • textarea:文本域
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <!-- action指的是提交给服务器的地址   method指提交的方式（get或post） -->
    <form action="./13-表单.html" method="get">
        <!-- lable主要是用来点击文字让光标定位在输入框 -->
        <!-- 文本输入框 -->
        <label for="user">用户名:</label><input type="text" name="username" id="user" ><br> 
        <!-- 密码框 -->
        密码: <input type="password" name="pwd" id=""><br>
        <!-- 单选框 -->
        性别：<input type="radio" name="gender" id="" value="male">男
            <input type="radio" name="gender" id="" value="female" checked>女
        <br>
        <!-- 复选框 -->
        爱好: <input type="checkbox" name="hobby" id="" checked>睡觉
            <input type="checkbox" name="hobby" id="">play game
            <input type="checkbox" name="hobby" id="">coding
            <input type="checkbox" name="hobby" id="" checked>美食
        <br>
​
        <!-- 一些常用的按钮 -->
        <input type="submit" value="提交">
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <br>
​
        <!-- 文件上传的   添加multipe属性可以选择多个文件-->
        <input type="file" name="" id="" multiple>
        <br>
​
        <!-- 下拉框 -->
        <select name="subject" id="">
            <option value="html">html</option>
            <option value="css" selected>css</option>
            <option value="js">js</option>
        </select>
        <br>
        <!-- 文本域 -->
        <textarea>这是文本域</textarea>
​
        <br>
        <!-- 补充:  隐藏域 -->
        <input type="hidden" name="info" value="abc">
    </form>
​
​
    <!-- lable主要是用来点击文字让光标定位在输入框 -->
​
    <button>这是一个按钮</button>
</body>
​
</html>

\

avatar
文章
阅读
粉丝