学习打卡HTML

五五六六0524

已于 2022-07-01 17:59:32 修改

阅读量212

点赞数 1

分类专栏：假期打卡文章标签： html 学习前端

于 2022-06-28 16:43:45 首次发布

本文链接：https://blog.csdn.net/wow0524/article/details/125502682

版权

假期打卡专栏收录该内容

12 篇文章 0 订阅

订阅专栏

属性

<a>中href指定链接地址，href='http:www..com'

<h1>中align指定对齐方式，align='center'居中

<body>中bgcolor指定背景颜色，bgcolor='yellow'

<table> 中border表格边框，border='1'

以旧换新的<style>标签

淘汰标签：<center>、<front>、<basefront>、<s>、<strike>、<u>

淘汰属性：align、bgcolor、color

替换成<style>background-color属性指定背景颜色，front-family属性指定字体，color属性指定颜色，font-size属性指定字体尺寸，text-align属性指定文本对齐方式

试试ing

<br>
    <head>
        <title>
            菜鸡本鸡
        </title>
    </head>
    <body background='3.jpg' width='800'>
        <!--添加背景图片-->
        <h1 style="font-family:arial;color:green;text-align:center;font-size:80px;">全球高考</h1>
        <p style="font-family:arial;color:green;font-size:20px;">世界灿烂盛大，欢迎回家</p>
        <a href="http:www.baidu.com" target="_blank">welcome
        <img src="4.jpg" height='100' width='200' alt="秦究游惑"></a>
        <!--alt可替代文本，img放进a里面=将图片作为链接来使用-->

    </body>
</html>

链接

href属性：指定链接的地址

target属性：指定被链接的文档在何处显示

name属性：命名锚

新窗口打开百度官网，welcome是元素内容

<a href="http:www.baidu.com" target="_blank">welcome</a>

图像

src源属性：图像地址

<img src="1.jpeg" width="104" height="'142"></img>

alt属性：图像加载不出来，可显示用以替换的文本

添加背景图片：<background>，若图像与网页不匹配，图像会重复显示

背景图片自适应：

<body background="1.jpg" style="background-repeat:no-repeat;background-size:100%;background-attachment:fixed;"></body>

表格

html的表格不是预设然后填充的，是写多少数据出现多少表格，这种写法我第一次见到（学得太少了呜呜呜涨见识了家人们）

border属性：设定表格边框

<tr>分割各行

<td>分割各个单元格

<td>之间不写表示空单元格，缺少边框，为了显示边框，需添加空格占位符 

<th>定义表头

<caption>定义标题

逻辑结构如下图

        <h4>一行一列</h4>
        <table border="1">
            <tr>
            <td>100</td>    
            </tr>
        </table>

        <h4>一行两列</h4>
        <table border="1">
            <tr>
            <td>100</td> 
            <td>200</td>    
            </tr>
        </table>

        <h4>两行两列</h4>
        <table border="1">
            <caption>xiu标题</caption>
            <tr>
            <th>张三</th>    
            <td>300</td>    
            </tr>
            <tr>
            <th>李四</th>    
            <td>400</td>    
            </tr>
        </table>

列表

<ul></ul>无序列表每行前面有一个小黑圆圈进行标记

<ul>后还可以加type属性定义多种标记，disc小黑圆圈（默认），circle空心圆圈，square小黑方块

<ol></ol>有序列表用数字进行标记

<ol>后也可以加type属性定义多种标记，type="a/A"等都可以，默认是数字，次序依次往后增加

框架起始于<ul>、<ol>，每个列表项起始于<li>

<dl>自定义列表

框架起始于<dl>，每个列表项起始于<dt>，每个列表项的定义起始于<dd>

嵌套列表中，框架起始<ul>，随后tab键在其中增加<ul>，默认最开始始小黑圆圈-空心圆圈-小黑方块

        <h4>嵌套列表</h4>
        <ul>
            <li>子鼠</li>
            <li>丑牛</li>
                <ul>
                    <li>寅虎</li>
                    <li>卯兔</li>
                        <ul>
                            <li>辰龙</li>
                            <li>巳蛇</li>
                        </ul>
                </ul>
        </ul>
        <h4>自定义列表</h4>
        <dl>
            <dt>午马</dt>
            <dd>未羊</dd>
        </dl>

文本格式化

HTML 文本格式化

<b>	粗体
<big>	大号字
<em>	着重文字
<i>	斜体
<small>	小号字
<strong>	加重语气
<sub>	下标
<sup>	上标
<ins>	插入
<del>	删除

块元素和内联元素

块元素block level element开始新的一行

内联元素inline element不开始新的元素

<div>块元素：分割文档（块级元素），例如可以将文档中单独的一个部分显示为绿色

<span>内联元素：分割文本（行内元素），例如可以为文本中单独的一个部分设置样式属性

id属性、class属性

id属性值唯一，class可以使用多次都对大小写敏感，感觉和python里的先写一个函数然后调用差不多

id属性语法是# + id + {CSS属性}，class属性语法是. + id + {CSS属性}

    <style>
    <!--id-->
    #mystyle1{
        font-family:arial;
        color:green;
        text-align:center;
        font-size:80px; 
    }
    <!--class-->
    .mystyle2{
        font-family:arial;
        color:rgb(78, 203, 241);
        text-align:left;
        font-size:40px; 
    }
    </style>
    <body background='3.jpg' width='800'>    
        <!--调用id-->  
        <h1 id="mystyle1">全球高考</h1>
        <!--调用class-->
        <p class="mystyle2">世界灿烂盛大，欢迎回家</p>
        <p class="mystyle2">世界灿烂盛大，欢迎回家</p>
    </body>

iframe在网页中显示网页

src指向链接地址，frameborder规定是否显示边框，等于0时移除

<iframe src="URL" width="200" height="200" frameborder="0"></iframe>

路径

绝对路径：加http开头的完整路径

相对路径：

语义元素

标签	描述
<article>	定义文章
<details>	细节
<figure>	自包含内容，比如图示、图表、照片、代码清单等
<footer>	页脚
<header>	页眉
<main>	主内容
<mark>	重要的或强调的文本
<nav>	导航链接
<section>	文档中的节
<time>	日期/时间

五五六六0524

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习打卡HTML

HTML标签，属性对大小写不敏感在开始标签中添加斜杠可以关闭空元素，比如h1-h6数字越小，字体越大href属性：指定链接的地址target属性：指定被链接的文档在何处显示 name属性：命名锚新窗口打开百度官网，welcome是元素内容图像 src源属性：图像地址width宽，height高alt属性：图像加载不出来，可显示用以替换的文本添加背景图片：，若图像与网页不匹配，图像会重复显示文本加粗下标等调整HTML 文本格式化中h...........................
复制链接

扫一扫