HTML笔记

最新推荐文章于 2024-01-18 19:00:14 发布

你倒是敲代码啊.

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量240

点赞数 1

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/qq_43446165/article/details/104099963

版权

web前端专栏收录该内容

12 篇文章 8 订阅

订阅专栏

HTML的概念

HTML：Hyper Text Markerup Language，超文本标记语言
超文本：使用超链接的方法，将各种不同空间的文字信息组织在一起的一种网状文本语言
标记语言：由标签构成的语言，<标签语言>，例如html，xml（标记语言不是编程语言）

HTML快速入门

后缀名：.htmlor .htm

标签分类以及标签语法

<html>
    <head>
        <title>login</title>
        <body>
            <font color = 'red'>Hello World!</font><br>
            <font color = 'green'>Hello World</font>><br>
        </body>
    </head>
</html>

标签的嵌套：需要正确的嵌套（类似括号的匹配）
围堵标签：开始标签、结束标签。如<html></html>
自闭和标签：开始标签和结束标签在一起。如<br>
在开始标签当中可以定义属性。属性是由键值对构成的，值需要用引号引起来。
html的标签不如分大小写，但是建议使用小写

<!DOCTYPE html>
<html>
    <head>
        <meta character = "utf-8">
        <title>theme</title>
    </head>
    <!-- 我操你妈 -->
    <body>
        <h1>chenajide</h1>
        <font color = 'red'>Hello World!</font><br>
        <font color = 'green'>Hello World</font><br>
        白日依山尽，黄河入海流。<p><hr color="red" width = "20" size="20">
        <b><i>落霞与孤鹜齐飞，秋水共长天一色。<br>
        <font colol = "red" size = "10" face = "楷体">五花马千金裘，呼儿将出换美酒</font>
    </body>
</html>

：html注释
<h1> to <h6>：标题标签
<p>：段落标签
<br>：换行标签
<hr>：显示一条水平线
<b>：字体加粗
<i>：字体斜体
<font></font>：字体标签，face可设置字体

三、图片标签

<img>：展示图片
相对路径：./image/pic.jpg，./表示当前目录；../image/pic.jpg，../表示上一级目录

<body>
    <img src="G:\Netdisk下载\714324.png" width="500" heigh="400" alt="hero">
</body>

四、列表标签

有序列表

<ol></ol>：表示有序列表
<li></li>：表示列表的每一项

<body>
    <ol type="I">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
    </ol>
</body>

无序标签

<ul></ul>：表示无序列表
<li></li>：表示列表的每一项

<body>
    <ul type="square">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
    </ul>
</body>

五、连接标签

<a></a>：超链接标签
href：可以指定访问的url，也可以是项目当中的其他资源
target：可以指定是当前页面打开还是在空白页面打开。例如，_self，_blank。

<body>
    <a href="https://www.baidu.com" target="_blank">点我</a>
    <br>
    <a href="https://www.baidu.com" target="_blank"><img src="G:\Netdisk下载\hero\714324.png" width="500" heigh="400" alt="hero"></a>
</body>

六、块标签

快标签无实际效果，将来会结合css使用

div

<div></div>：每一个div标签占用一行，块级标签

<body>
    <div>我是神</div>
    <div>你是神</div>
</body>

span

<span></span>：文本信息在一行显示，行内标签，内联标签

<body>
    <span>我是神</span>
    <span>你是神</span>
</body>

七、语义化标签

语义化标签是html5用来提高可读性而产生的
语义化标签无实际作用，将来会结合css进行使用
<header></header>：可用来表示开头
<footer></footer>：可用来表示结尾

<body>
    <header>
        <div>我是神</div>
    </header>

    <footer>
        <div>你是神</div>
    </footer>
</body>

八、表格标签

<table></table>：定义表
cellspadding：定义单元格与内容之间的距离
cellspacing：定义单元格之间的距离
align：定义单元的位置
bgcolor：定义单元格的背景颜色
<tr></tr>：定义行
<td></td>：定义单元格
<rowspan>：合并行
<colspan>：合并列
<th></th>：定义表头单元格
<caption></caption>：定义表格标题
<thead>：表示表格的头部分（无实际作用）
<tbody>：表示表格的体部分（无实际作用）
<tfoot>：表示表格的脚部分（无实际作用）
单元的设计规则

<!--
1.如果是一行只有一个单元格<tr><td></td></tr>
2.如果是一行有多个单元格
<tr>
    <td>
        <table>
            <tr>
                <td>......</td>
                <td>......</td>
                <td>......</td>
                <td>......</td>
                    ......
            </tr>
        </table>
    </td>
</tr>
-->

不合并单元格

<!DOCTYPE html>
<html>

<head>
    <meta character="utf-8">
    <title>表格标签</title>
</head>

<body>
    <table border="1" align="center" bgcolor="red" width="25%" cellpadding="0" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三丰</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王宝强</td>
            <td>99</td>
        </tr>
    </table>
</body>

</html>

合并单元格

<!DOCTYPE html>
<html>

<head>
    <meta character="utf-8">
    <title>表格标签</title>
</head>

<body>
    <table border="1" align="center" bgcolor="yellow" width="25%" cellpadding="0" cellspacing="0">
        <caption>学生成绩表</caption>
        <tr>
            <th rowspan="2">编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>100</td>
        </tr>
        <tr>
            <td>王宝强</td>
            <td colspan="2">99</td>
        </tr>
    </table>
</body>

</html>

九、表单标签

表单是什么：用于采集用户输入的数据。将数据用于和服务器进行交互。
<form></form>：表单标签，定义能够提交数据的范围
action：可以指定url，往往是服务器端的一个资源
method：可以指定提交方式，常用的就是GET和POST方式
表单项当中的数据要想被提交，必须指定其name属性

表单项标签

<input>：用于接收用户输入
<select>：下拉列表
<textarea>：文本域

文本输入框

<input type="text">：文本输入框
```placeholder``：指定输入框的提示信息，在输入内容后提示信息就会消失

用户名:<input type="text" name="username"><br>

密码输入框

<input type="password">：密码输入框，与文本输入框的不同就是回显为*
```placeholder``：指定输入框的提示信息，在输入内容后提示信息就会消失

密码:<input type="password" name="password"><br>

单选框

<input type="radio">：单选框
要想实现多个单选框的单选效果，那么这多个单选框的name属性值必须相同
一般会给每一个单选框指定其value属性，来指定其被选中之后提交的值
- ````checked=“checked”```：表示默认选中

性别:
<input type="radio" name="gender" value="male">男 
<input type="radio" name="gender" value="female">女
<br>

复选框

<input type="checkbox">：复选框
一般会给每一个单选框指定其value属性，来指定其被选中之后提交的值
````checked=“checked”```：表示默认选中

爱好：
<input type="checkbox" name="hobby" value="ball" checked="checked">ball
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="game">game
<br>

label标签

<label>：指定输入框的描述信息
for：一般与<input>当中的id属性值相同，点击之后会让<input>输入框获取焦点

<label for="username">用户名</label>:<input type="text" placeholder="username" name="username" id="username"><br>

文件选择框

<input type="file">：文件选择框

<input type="file" name="file">

隐藏框

<input type="hidden">：隐藏域，区域不会显示但是会提交value值

<input type="hidden" name="hidden" value="china">

按钮

<input type="submit">：提交按钮，用来提交表单
<input type="button">：仅仅是一个按钮，没有作用，将来会与JS结合
<input type="image">：可以设置图片的提交按钮

        <input type="color" name="color" value="color">
        <br>
        <input type="date" name="date">
        <br>
        <input type="datetime-local" name="datetime-local">
        <br>
        <input type="email" name="email">
        年龄：<input type="number" name="age">

你倒是敲代码啊.

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记

HTML的概念HTML：Hyper Text Markerup Language，超文本标记语言超文本：使用超链接的方法，将各种不同空间的文字信息组织在一起的一种网状文本语言标记语言：由标签构成的语言，<标签语言>，例如html，xml（标记语言不是编程语言）HTML快速入门后缀名：.htmlor .htm标签分类以及标签语法<html> &l...
复制链接

扫一扫