html基础格式——Web学习day1

最新推荐文章于 2024-10-03 22:12:17 发布

「已注销」

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量134

点赞数

分类专栏： Web集训2021 文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_44453019/article/details/120530833

版权

Web集训2021 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML的基础知识，包括HTML标签、列表、表单的使用，以及GET和POST的区别。此外，还讲解了HTML样式，如背景颜色、外部样式、CSS的继承性和层叠性，以及字体和边框样式。伪类选择器的概念也被提及。

摘要由CSDN通过智能技术生成

0913-15学习总结

基础格式

<!DOCTYPE html> h5 头部声明 
<html> 跟标签 
<head> 头标签 
<meta charset="UTF-8"> 设置编码， 
<title>Title</title> 设置标题，显示在网页的标题栏上 
</head> 头标签结束 
<body> 身体 网页的内容都是写在这里边的 
This is my first page!! 内容 
</body> 身体结束标签 
</html> 根标签结束

HTML基础

标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <p> 和 </p>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1>

 `</h1>` 之间的文本被显示为标题
`<p>` 与 `</p>` 之间的文本被显示为段落

HTML标签

1.HTML 标题（Heading）是通过 <h1> -<h6>标题等标签进行定义的。数字越大字体越小。
2.HTML 链接是通过标签进行定义的。在 href 属性中指定链接的地址

<a id="head"></a> <!--锚点--> <a href="https://baidu.com" target="_self">百度一下</a> <a href="a/day02.html" target="_self">day02</a> <div style="width: 400px;height: 2000px"> </div> <p>床前明月光</p> <a href="#head">跳转到顶部</a>

href:表示要跳转的地址
target: _blank 空白的，，_self
作用：1. 跳转到其它链接
2. 锚点配合id使用，在跳转时候需要加#
3. 跳转到具体资源，如：可以跳转到本地另外一个网页
4. 4.HTML 图像是通过标签进行定义的。图像的名称和尺寸是以属性的形式提供的。

<a href="https://baidu.com" ><img src="a111.jpg" title="这是一张美女图片" alt = 
"网络链接失败的美女图"></a>

src: 表示图片路径，可以写网址
相对路径：参照物，是本身所在的路径。
. 表示当前目录。
… 表示跳到当前目录的父级路径
绝对路径：网址，从盘符开始，一般不用。云端，服务器。
title: 鼠标悬停提示信息
alt：图片加载提示信息。

HTML列表

无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>有序列表</h1>
  <ol>
      <li>首页</li>
      <li>音乐</li>
      <li>视频</li>
      <li>web前端</li>
  </ol>
  <h1>无序列表</h1>
  <ul>
      <li>首页</li>
      <li>音乐</li>
      <li>视频</li>
      <li>web前端</li>
  </ul>
  <h1>自定义列表</h1>
    <dl>
        <dt>web前端1班</dt>
        <dd>啦啦啦啦啦啦啦啦啦啦啦</dd>
        <dt>web前端2班</dt>
        <dd>啦啦啦啦啦啦啦啦啦啦啦</dd>
        <dt>web前端3班</dt>
        <dd>啦啦啦啦啦啦啦啦啦啦啦</dd>
    </dl>
</body>
</html>

HTML表单

用来接收用户输入的信息，并且提交给后端。
注意：

表单选项需要加 name属性，这样才能提交数据。
单选需要在一个组里边，name值一样就是一个组。
单选要给value值，这样后端才能区分到底选的是哪个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <h1>表单学习</h1>
<form action="https://xxxx.com" method="get" >   <!--?username=ffff&pwd=dsdadsfdsf-->
    <input type="text" placeholder="请输入用户名" name="username">  <br>
    <input type="password" placeholder="请输入密码" name="pwd"><br>
    性别： <input type="radio" name="sex" value="nan">男
     <input type="radio" name="sex" value="nv">女
     <input type="radio" name="sex" value="other">其他
    <br>
    爱好：<input type="checkbox" name="aihao" value="web"> 敲代码出去玩
<input type="checkbox" name="aihao" value="outside"> 出去玩
    <br>
    出生日期：<input type="date" name="birthday"> <br>
    个人介绍： <textarea cols="20" rows="10"></textarea><br>
    自拍：<input type="file" name="file"><br>
    手机：<input type="number" placeholder="请输入手机号" name="phone">
    城市：<select>
        <option>-----请选择-----</option>
        <option>武汉</option>
        <option>上海</option>
        <option>北京</option>
    </select>
    <input type="submit" value="登录">

</form>
</body>
</html>

get和post区别

get 提交的数据在地址栏，格式
?username=ffff&pwd=dsdadsfdsf
get弊端，暴露用户数据隐私，像登录，注册，不要用get。
携带的数据大小有限制，上传文件，不能用get
上传登录注册等用post
post提交数据在：请求体。

HTML样式

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--        教学使用 ，虽然抽取，但还是在一个网页中，只适合少量样式   -->
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red
        }
    </style>
</head>
<body>
<!--行内样式，一般不用，项目中样式很多，如果都是行内，会很臃肿。-->
    <div>fffffff</div>
    <div>fffffff</div>
</body>
</html>

background-color 属性为元素定义了背景颜色：

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

外部样式
新建file，后缀该css。且在原有html引用css

<link rel="stylesheet" href="css/day03.css" type="text/css">

CSS的继承性
就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css继承性</title>
    <style>
        div{
            font-size: 30px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是div内的p标签</p>
    </div>
</body>
</html>

CSS层叠性
指的是：权重相同的情况下，后写的覆盖前面的样式。

选择器有两大类：
基础选择器：id选择器，类选择器，标签选择器，通配符选择器；
复合选择器：后代选择器，并集选择器，指定标签（交集）选择器；

权重：
基础选择器权重：id选择器 > 类选择器> 标签选择器> 通配符选择器；
1.内联样式，如: style=””，权值为1000。
2.ID选择器，如：#content，权值为100。
3.类，伪类和属性选择器，如.content，权值为10。
4.标签选择器和伪元素选择器，如div p，权值为1。

复合选择器的权重计算：
将基本选择器的权重相加之和，就是权重大小，值越大，权重越高。
如果权重一样就听最后一个的。

字体相关的样式边框

<title>字体相关的样式</title>
<style>
    p{
        font: italic small-caps bold 12px arial,sans-serif ;
        font-family:"Times New Roman",Georgia,Serif;  /*一般最后一位用 常用的。。宋体*/
        font-size: 30px;  /*默认谷歌 16px */
        color: #f0f   /* 单词，十六进制 #ffffff 简写 # fff   黑色： 000 rgb(红，绿，蓝) 十进制数字0-255  */
    }

边框
border: 10px groove red;
height:100px;
border-bottom-style: groove;

伪类选择器

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        p{
            font-size: 20px;
        }
        .p:hover{  /*表示所有的元素这个状态，一般指定是哪个元素具备这个状态的样式*/
            font-size: 25px;
        }

        a:hover{
            font-size: 18px;
            text-decoration: none;
        }
        a:active{
            color: magenta;
        }
        a:visited{
            color: cyan;
        }
        a:link{
            color: red;
        }
    </style>
</head>
<body>
  <p class="p">首页</p>
  <a href="http://hao123.com">enenenene</a>
</body>
</html>

导航栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: white;


        }
        ul li{          /*后代选择器*/
            display: inline;
            margin-left: 16px;
        }
        ul{
            background: black;
            height: 50px;
            line-height: 50px;
        }
        a:hover{
            padding-left: 5px;
            padding-right: 5px;
            font-size: 20px;
            display: inline-block;  /*摆放在一行的块元素，*/
            background: green;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">服饰</a></li>
        <li><a href="#">数码</a></li>
        <li><a href="#">食品</a></li>
        <li><a href="#">玩具</a></li>
    </ul>
</body>
</html>