0612-HTML day 1

最新推荐文章于 2024-10-04 22:04:56 发布

青柠味的脉动1

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量396

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/zxt20020625/article/details/139635478

版权

01.排版标签

<h>标题标签一个界面只能有一个一级标题

分段标签

换行标签

<hr>横线标记

Ctrl+s 自动保存

02.div和span标签

<div>是块级元素,独占一行.包裹独立的块内容时可以使用div元素

是行内元素,包裹文字时都可以使用

03.文本格式化标签

加粗

斜体

<s><del>删除

<ins>下划线

strong,em,del, ins语气强调,都是行内元素

04.img标签

img图像

05.img属性

alt 当网络加载错误时,进行提示信息

06.超链接标签

最常用的是<a herf="#"></a>标签这里我们应该注意的是""里面不能为空没有链接的时候要用#代替

07.ico图标

<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">

提取图标的时候我们只需在对应的网址后面加上favicon.ico就可以实现图标的提取

08.特殊字符

&nbsp为半角字符 &emsp为全角字符 &lt为小于号 &gt为大于号

这里我们要注意的是: 两个半角并不等于一个全角

09.p和div的写法注意点

div包裹盒子,可以包裹任何标签

p标签不可以嵌套div

10.无序列表和有序列表还有自定义列表

ul li 无序列表 unordered list ul里只能嵌套li li里面可以包裹其他元素

ol li 有序列表 ordered list

11.input控件

单行文本输入框

<label for="user">用户名:</label>
    <input type="text" value="请输入密码" name="username" form="user">

placeholder占位符 name属性与后台交互时候,是必须设置的

<input type="text" placeholder="请输入密码" name="pwd"> 密码:
    <input type="password">

按钮

<input type="button" value="登录">

也是按钮

button>注册</button>
    <button><img src="img/xiaozhou.jpg" alt="" width="50"></button>

12.css的使用方式

内部样式表 head里 title下 style

<style>
        div {
            font-size: 30px;
            color: blue;
            font-weight: 500;
            line-height: 50px;
            font-style: italic;
        }
    </style>

行内使用

<p style="font-size: 30px;color:blue;font-weight:500;line-height: 50px;font-style: italic;">
        关于迷茫 当你不知如何抉择 假象五年后你回顾青春 你就是知道该如何抉择了
    </p>

13.选择器

1、元素选择器，这是最基本的标签选择器，使用html标签名称作为选择器；2、通配符选择器，使用*作为选择器，可以选择文档中的所有元素；3、类选择器使用类名作为选择器，可以选择具有相同类名的元素；4、id选择器使用元素的id属性作为选择器，可以选择具有特定id的元素；5、属性选择器

<style>
div {
            color: blue;
        }
        
span {
            color: aqua;
        }
.item {
            color: blueviolet;
        }
 #main {
            color: aquamarine;            
            font-size: 30px;
        }
 * {
            border: 1px solid red;
        }
</style>
<body>
    <div>关于我</div>
    <div>关于你</div>
    <div>关于他</div>
    <span>关于焦虑</span>
    <span>关于开心</span>
    <span>关于伤心</span>
    <p class="item">12345</p>
    <p>09877</p>
    <em id="main">6789</em>
</body>

在这里要注意:class属性设置标签的名字

id属性相当于身份证同样的名字的id只能有一个

总结:

对于一个零基础的我来说一天学习这些我感觉确实有点吃力,比如说在对类选择器的理解时为什么要在上面建一个style,但当你静下心来来理解这个类选择器其实就是:类选择器使用类名作为选择器，可以选择具有相同类名的元素。通过给他一个类名,那么具有这些相同的类名的元素都会设置为相同的属性.所以说有些东西我们需要理解,但有的东西特别抽象的话,你就只需知道他是怎么用的就可以了.我的分享就是这些希望大家多多指教.