Web前端开发-HTML

w官礼

已于 2023-08-08 10:40:29 修改

阅读量60

点赞数

文章标签：前端 html

于 2023-08-06 19:01:15 首次发布

本文链接：https://blog.csdn.net/m0_74270206/article/details/132115849

版权

一、HTML

HTML快速入门

1、新建文本文件，后缀名改为.html

2、编写HTML结构标签

3、在<body>中填写内容

<html>
   <head>
      <title>HTML快速入门</html>
   </head>
   <body>
       <h1>Hello  HTML</h1>
       <img src="1.jpg"/>
   </body>
</html>

html 标签不区分大小写

属性既可以使用单引号也可以使用双引号

语法结构松散，不严格。

实现标题/排版

图片标签：<img>

src:指定图像的url（绝对路径/相对路径）
width：图像的宽度（像素 px/相对于父元素的百分比%）
height：图像的高度（像素/相对于父元素的百分比）

路径的书写方式

绝对路径：

1、绝对磁盘路径：E:\Developer\HTML入门\news_logo.png

2、绝对网络路径

相对路径：

./: 当前目录,./可以省略

../ :上一级目录

标题标签：<h1> - <h6>

水平线标签<hr>

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
   <!--  字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>

    <img src="news_logo.png "width="200px" >   新浪政务 > 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    
    <hr>
   2023年08月05日 08:07 新京报
    <hr>
</body>
</html>

超链接

标签：

属性：

href:指定资源访问的url

target:指定在何处打开资源链接 _self:默认值，在当前页面打开 _blank:在空白页面打开

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
   <!--  字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

 <style >
    h1{
        color:#4D4F53
    }

    /*元素选择器*/
    span{
        color:#968d92
    }

    /*类选择器*/
    .cls{
        color:#968d92
    }

    /*id选择器*/
    #time{
        color :#968d92
        font-size:13px;
    }


    </style>

</head>
<body>

    <img src="news_logo.png "width="200px" >  
    <a href ="https://so.sina.cn/palmnews/web-sinanews-app-download.d.html"> 新浪政务 </a>> 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
   <span>2023年08月05日 08:07</span>
   <a href="https://mp.weixin.qq.com/s?__biz=MzU2MzA2ODk3Nw==&mid=2247835820&idx=1&sn=a01f5678f660fb8edf1228e35768f5ba&chksm=fc5009f2cb2780e41d2971072c769cc1d354896d76a0b537d84286953fa542663b18fe1693dd&scene=0&xtrack=1" tagrge="blank"> 新京报</a>
    <hr>
</body>
</html>

正文排版

视频标签：<video>

src:规定视频的url

controls:显示播放控件

width:播放器的宽度

height:播放器的高度

音频标签：<audio>

src:规定音频的url

controls:显示播放控件

段落标签：<p>

文本加粗标签：<b>/<strong>

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
   <!--  字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

 <style >
    h1{
        color:#4D4F53
    }

    /*元素选择器*/
    span{
        color:#968d92
    }

    /*类选择器*/
    .cls{
        color:#968d92
    }

    /*id选择器*/
    #time{
        color :#968d92
        font-size:13px;
    }

    a{
        color:black;
        text-decoration: none;
    }

    p{
        text-indent:35px;
    }


    </style>

</head>
<body>

    <img src="news_logo.png "width="200px" >  
    <a href ="https://so.sina.cn/palmnews/web-sinanews-app-download.d.html" target="_self "> 新浪政务 </a> > 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
   <span>2023年08月05日 08:07</span>
   <a href="https://mp.weixin.qq.com/s?__biz=MzU2MzA2ODk3Nw==&mid=2247835820&idx=1&sn=a01f5678f660fb8edf1228e35768f5ba&chksm=fc5009f2cb2780e41d2971072c769cc1d354896d76a0b537d84286953fa542663b18fe1693dd&scene=0&xtrack=1" target="_blank"> 新京报</a>
    <hr>

<video src="video/1.mkv" controls width="950px"></video>
<audio src="audio/1.map3"controls></audio>

<p>
    台风“杜苏芮”的残余环流正冲着华北平原一路奔袭时，北京山区的居民有些已经准备转移。
</p>
<p>
    7月29日早7时，房山区周口店镇宣传部部长孙佳炜接到任务，他要负责拴马庄村和泗马沟村的群众转移。9个小时后，转移完毕，村委会给村民们提前预备了床、5天的食水，甚至还买了两副扑克。
同日，北京消防救援总队启动高等级戒备，进入防汛临战状态。平谷区马坊消防救援站站长赵建辉将站内35人全部召回。
</p>

</body>
</html>

text-indent:35px 设置首行缩进

line-height:45px 设置行高

页面布局

盒子:页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成∶内容区域(（content)、内边距区域〈padding)、边框区域（border)、外边距区域(margin)

表格标签

场景：在网页中以表格（行、列）形式整齐展示数据。

标签：

<head>
<title>
HTML-表格
</title>

</head>

<body>

<table border="1px" cellspacing="0" width="600px">

    <tr>
<th>序号</th>
<th>品牌</th>
<th>企业名称</th>
    </tr>

    <tr>
        <td>1</td>
        <td>华为</td>
        <td>华为技术有限公司</td>

    </tr>

    <tr>
        <td>2</td>
        <td>阿里</td>
        <td>阿里巴巴集团控股有限公司</td>

    </tr>

    

</body>

表单标签

场景：在网页中主要负责数据采集功能，如：注册、登录等数据采集

标签：form

表单项：不同类型的input元素、下拉列表、文本域等。

属性：

action:表单提交的url，往何处提交数据﹒如果不指定，默认提交到当前页面

method:表单的提交方式.

get:在url后面拼接表单数据，比如: ?username=Tom&age=12 , url长度有限制．默认值

post:在消息体(请求体)中传递的，参数大小无限制的.

<!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>HTML-表单</title>
        </head>

        <body>

            <form action="" method="get">
                用户名：<input type="text" name="username">
                年龄:<input type ="text" name="age">
                <input type="submit" value="提交">
            </form>
            </body>

表单项标签

二、CSS

行内样式: 写在标签的style属性中 (不推荐)

<h1 style=“xxx:xxx ; xxx:xxx ;”>中国新闻网</h1>

内嵌样式:写在stvle标签中(可以写在页面任何位置，但通常约定写在head标签中)

<style>

h1{
xxx:xxx;

xxx:xxx;

}

</style>

外联样式:写在一个单独的.css文件中(需要通过 link 标签在网页中入)

h1{

xxx:xxx;

xxx:xxx;

}

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
   <!--  字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

<!-- 方式二：内嵌样式 -->
    <!-- <style>
        h1{
            color: cadetblue;
        }
    </style>
 -->

 <!-- 方式三：外联样式 -->
 <link rel="stylesheet" href="css/news.css">
</head>
<body>

    <img src="news_logo.png "width="200px" >   新浪政务 > 正文

    <!-- 方式一<h1 style="color: coral;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
   2023年08月05日 08:07 新京报
    <hr>
</body>
</html>

颜色表示方式：

css选择器：用来选取需要设置样式的元素（标签）

元素选择器

id选择器

类选择器

/*元素选择器*/
    span{
        color:#968d92
    }

    /*类选择器*/
    .cls{
        color:#968d92
    }
 /*id选择器*/
    #time{
        color :#968d92
    }

优先级：id选择器>类选择器>元素选择器

font-size:设置字体大小

text-align属性：

h1{text-align:center/left/right；}

居中/向左/向右对齐

w官礼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发-HTML

盒子:页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。盒子模型组成∶内容区域(（content)、内边距区域〈padding)、边框区域（border)、外边距区域(margin)target:指定在何处打开资源链接 _self:默认值，在当前页面打开 _blank:在空白页面打开。内嵌样式:写在stvle标签中(可以写在页面任何位置，但通常约定写在head标签中)行内样式: 写在标签的style属性中 (不推荐)
复制链接

扫一扫