HTML初学笔记-1

最新推荐文章于 2024-07-15 15:35:16 发布

一个程序员罢了

最新推荐文章于 2024-07-15 15:35:16 发布

阅读量190

点赞数

分类专栏： html初学笔记文章标签： html webview 前端

本文链接：https://blog.csdn.net/z_zsx/article/details/124651373

版权

html初学笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、html基本结构体

<html>
<head></head>
<body></body>
</html>

二、常用标签

1. 标题标签 <h1></h1>... <h6></h6>标题标签的作用是文字变大并且加粗
2. p标签被称为段落标签被p标签所包含的内容都会自动换行并且两行的距离比较大
3. 换行标签 <br> 写在哪里哪里就会产生换行空格-->   写一个就是1个空格
4. <em></em> 斜体标签
5. <strong></strong> 文字加粗标签
6. <u></u> 文字加上下划线标签。
7：特殊符号:   空格 © 版权符号 " 双引号 > 大于号 <小于号
8: 水平分割线 <hr>
9： <head></head>在头部中可以写入网页标题标签 <title></title>
10: 当浏览器出现了乱码的行为在头部中写入 <meta charset=utf-8>
11： <img src="图片的名字" width="宽度px" height="高度px" >图片标签
还可以加入 title属性 title属性的作用是当鼠标悬浮在图片上可以显示的文字。

12： <a href="网址" >文字</a> a标签是超链接标签点击文字即可跳转到href后面的网址

13: <a href ="mailto:123456@qq.com" > 联系我们</a> 当点击文字的时候向12345@qq.com进行发送邮件。

14: <a name="wk">悟空</a> <a href="#wk">寻找悟空</a>
锚链接: 给当前的悟空起了名字叫wk 点击寻找悟空寻找的就是wk的位置。

三、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px" align="center" cellpadding="30px" cellspacing="10px">
        <!-- cellpadding边框到内容的距离 -->
        <!-- cellspacing边框间距 -->
        <thead>
            <caption>大</caption>
            <tr>            
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">1.1</td>
                <!-- 占用n列宽 -->
                <td>1.2</td>
                <td>1.3</td>
                <td>1.4</td>
                <td>1.5</td>
            </tr>
            <tr>
                <td rowspan="2">2.1</td>
                <!-- 占用n行高 -->
                <td>2.2</td>
                <td>2.3</td>
                <td>2.4</td>
                <td>2.5</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
                <td>3.4</td>
                <td>3.5</td>
            </tr>
            <tr>
                <td>4.1</td>
                <td>4.2</td>
                <td>4.3</td>
                <td>4.4</td>
                <td>4.5</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

四、表单

<form method="get"></form>
form是个表单当点击提交按钮的时候提交的就是form表单
method= "get" 或者 post
get是可以显示出数据的安全性并不高, post安全性比较高

<input type="password" name="mm" maxlength=5>
当前的框是密码框名字叫做mm maxlength=5 最多可以输入5个数
<input type="submit"> 提交按钮 submit提交

<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
radio单选按钮既然是单选那么只能2选1 所以name必须一样

<input type="checkbox" name="xq">篮球
<input type="checkbox" name="xq"checked>足球
<input type="checkbox" name="xq">羽毛球
名字保持一致有几个兴趣被选中了那么就有几个 xq=on
checked是默认被选中

<select name="cs" size="2">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gd" selected>广东</option>
</select>
size=2 是显示2行 value="bj" 是把中文的值替换成了英文。
selected是默认被选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- action="服务器接收表单数据URL" -->
    <!-- method="请求方式" get或者post-->
    <form action="" method="get">
        <!-- 
            input 表单标签
            type  表单类型
                text        文本
                password    密码
                submit      提交按钮
                radio       单选按钮，name需要一样
                checkbox    多选按钮，name需要一样  默认选中checked
            name  向服务器发送数据后端接受数据的key
            value 向服务器发送数据后端接受数据的value
            id    页面内操作，如引用指向等
            placeholder 默认，提示
            autocomplete 是否显示记录
            select 单选下拉列表 添加multiple即可多选
            slogan 文本域
         -->
        <input type="text" name="account" value="" id="account" placeholder="请输入账号" autocomplete="off">
        <input type="password" name="password" value="" id="password" placeholder="请输入密码" autocomplete="off">
        <br>
        性别：
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 区域选中<label for="指向的id"></label> -->
        <label for="male">男</label>
        <input type="radio" name="gender" value="1" id="male" checked>
        &nbsp;&nbsp;
        <label for="famale">女</label>
        <input type="radio" name="gender" value="0" id="famale">
        <br>
        爱好：
        &nbsp;&nbsp;&nbsp;&nbsp;
        <label for="swimming">游泳</label>
        <input type="checkbox" name="hobby" value="swimming" id="swimming" checked>
        &nbsp;&nbsp;
        <label for="running">跑步</label>
        <input type="checkbox" name="hobby" value="running" id="running">
        &nbsp;&nbsp;
        <label for="skiing">滑雪</label>
        <input type="checkbox" name="hobby" value="skiing" id="skiing">
        <br>
        籍贯
        &nbsp;&nbsp;&nbsp;&nbsp;
        <select name="hometown" id="hometown">
            <option value="beijing">北京</option>
            <option value="hebei" >河北</option>
            <option value="shanghai">上海</option>
        </select>
        <br>
        水果
        &nbsp;&nbsp;&nbsp;&nbsp;
        <select name="fruits" id="fruits" multiple>
            <option value="banana">香蕉</option>
            <option value="apple">苹果</option>
            <option value="pear">梨子</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

一个程序员罢了

关注

0
点赞
踩
0

收藏

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

一、html基本结构体<html><head></head><body></body></html>二、常用标签1. 标题标签 <h1></h1>... <h6></h6>标题标签的作用是文字变大并且加粗2. p标签被称为段落标签被p标签所包含的内容都会自动换行并且两行的距离比较大3. 换行标签 <br> 写在哪里哪里就会产生换行空格--...
复制链接

扫一扫