HTML标签以及认识浏览器

最新推荐文章于 2024-08-12 23:09:04 发布

Mr..MELON

最新推荐文章于 2024-08-12 23:09:04 发布

阅读量222

点赞数 1

文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_51371644/article/details/115915243

版权

一、HTML标签

1.声明

可以通过输入英文状态下的==!，然后按下Tab==键生成HTML框架，

<!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>
    
</body>
</html>

2.基本标签

（1）标题标签

<h1>~<h6> 标题标签
    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>

效果如下：
在这里插入图片描述

（2）段落以及换行标签

    <p>为段落标签，<br/>为换行标签
    <p>1月14日晚，朝鲜在平壤金日成广场举行了纪念朝鲜劳动党第八次代表大会阅兵式。</p>

    <p>什么情况？朝鲜不是在去年10月刚刚举行过阅兵式吗？<br />频密的阅兵，这是在向外界传达和展示什么呢？</p>

    <p>在观看了朝鲜阅兵的视频后，笔者发现了一个小细节，就是此次阅兵中，无论是参阅官兵还是群众，没有一人戴口罩，在全球疫情最严峻的时刻，这说明朝鲜疫情控制得相当好！难怪朝鲜被世卫组织评为世界上唯一没有被疫情感染的五个地区之一。</p>

在这里插入图片描述

（3）文本格式化标签

    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>

效果如下：
在这里插入图片描述
说明：这是html下的文本修饰，后期学习css后常用如下代码表示加粗，倾斜，删除线，下划线：

    需要添加css样式
        <style>
        .bold {
            font-weight: 700;
        }
        .italic {
            font-style: normal;
        }
        .line-through {
            text-decoration: line-through;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
    <p class="bold">我是加粗的文字</p>
    <p class="italic">我是倾斜的文字</p>
    <p class="line-through">我是有删除线的文字</p>
    <p class="underline">我是有下划线的文字</p>

效果如下：
在这里插入图片描述

（4）div以及span标签

    <div>我是一个div标签，我一个人独占一行（存储东西的盒子）</div>
    <div>我是一个div标签，我一个人独占一行（存储东西的盒子）</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>

效果如下：
在这里插入图片描述

（5）图像标签

    src 写图片的链接地址
    alt 替换文本 图像显示不出来的时候用文字替换
    title 提示文本 鼠标放到图像上，提示的文字
    width 给图像设置宽度
    height 给图像设置高度
    <img src="微信图片_20210120204153.jpg" alt="我是戳戳" title="我是戳戳思密达" width="500" height="350"/>

效果如下：
在这里插入图片描述

（6）超链接标签

  超链接a标签，href=" " 引号中写链接地址，可设置打开方式用target属性，默认为_self为在当前页面打开，_blank为在新页面打开

    <a href="https://www.sohu.com/" target="_self"> 搜狐</a>

（7）表格标签

表格属性要写到表格标签table里面，align=“center”,为表格居中，cellpadding为文字和边框之间的距离，cellspacing为单元格边框之间的距离

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
        <tr> <th>姓名</th>  <th>性别</th>  <th>年龄</th> </tr>
        <tr> <td>刘德华</a></td>  <td>男</td>  <td>54</td> </tr>
        <tr> <td>张学友</a></td>  <td>男</td>  <td>51</td> </tr>
        <tr> <td>郭富城</a></td>  <td>男</td>  <td>53</td> </tr>
        <tr> <td>黎明</a></td>  <td>男</td>  <td>52</td> </tr>
    </table>

效果如下：
在这里插入图片描述

（8）列表

（a）无序列表

ul为无序列表标签，li为里面元素，表现为小圆点

    <h4>喜欢的食物？</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>

效果如下：
在这里插入图片描述

（b）有序列表

ol为有序列表标签，li为里面元素，表现为序号，常用于排名制作

    <h4>娱乐女明星人气指数排行榜</h4>
    <ol>
        <li>赵丽颖</li>
        <li>杨幂</li>
        <li>唐嫣</li>
        <li>迪丽热巴</li>
    </ol>

效果如下：
在这里插入图片描述

（c）自定义列表

标签为dl,其中dt常对应多个dd，常用于网站底部footer元素制作

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

在这里插入图片描述

（9）form表单域的input表单元素

email属性必须填写邮箱，否则显示错误
url属性必须填写网址，否则显示错误
date属性必须选择日期，否则显示错误
依次类推，

    <form action="">
        <ul>
            <li>邮箱：<input type="email"></li>
            <li>网址：<input type="url"></li>
            <li>日期：<input type="date"></li>
            <li>时间：<input type="time"></li>
            <li>数量：<input type="number"></li>
            <li>手机号码：<input type="tel"></li>
            <li>搜索：<input type="search"></li>
            <li>颜色：<input type="color"></li>
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>

效果如下：
在这里插入图片描述

（10）select下拉表单

option为下拉选项元素，在option中定义selected=“selected”,当前项为默认选中项

    籍贯:
    <select>
            <option>山西</option>
            <option>山东</option>
            <option>宁夏</option>
            <option>辽宁</option>
            <option selected="selected">河南</option>
            <option>吉林</option>
    </select>

效果如下：
在这里插入图片描述

（11）form的textarea文本域

row设置行数
col设置列数

    <form>
        今日反馈:
        <textarea cols="50" rows="5">我知道这个反馈留言是textarea来做的
        </textarea>
    </form>

效果如下：
在这里插入图片描述

注意：你会发现这样一个问题，当你点击文本框写字时，文本框轮廓会黑色变深，当你拖动文本框的右下角会发现文本框会拉大或者缩小，影响页面布局。可通过添加css样式解决这一问题：

        <style>
        textarea {
            /* 1.取消表单轮廓 */
            outline: none;
            /* 2.防止拖拽文本域 */
            resize: none;       
        }
        </style>

效果如下：
在这里插入图片描述

二、浏览器

1.建议浏览器

建议编写网页使用Google Chrome浏览器打开，可使用F12键检查源代码，点击左上角箭头，然后用鼠标放至想要查看的网页元素，点击，在右下角查看样式
如下图：
在这里插入图片描述

2.控制台

个人目前认识：
JavaScript中输出语句console.log()可在控制台中查看输出结果。

    例如比较两个数大小
    <script>
        function getMax(num1, num2) {
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(3, 12));
    </script>

可点击下方Console查看结果，代码执行结果如下：
在这里插入图片描述

Mr..MELON

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML标签以及认识浏览器

一、HTML标签1.声明可以通过输入英文状态下的==!，然后按下Tab==键生成HTML框架，<!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-
复制链接

扫一扫