一文搞定HTML

@十个桃子

已于 2024-08-03 22:41:14 修改

阅读量619

点赞数 20

分类专栏： JavaWeb 文章标签： html css 前端 java

于 2024-08-03 19:50:02 首次发布

本文链接：https://blog.csdn.net/2403_85375987/article/details/140894879

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

HTML快速入门

1.新建文本文件，后缀名改为.html
2.编写 HTML 结构标签
3.在<body>中填写内容

1.HTML结构标签
<html>
        <head>
                <title>标题</title>

        </head>

        <body>

        </body>
</html>

2.特点
HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

新鲜看点

标题

排版

图片标签:<img>
src:指定图像的url(绝对路径/相对路径)

width:图像的宽度(像素/相对于父元素的百分比)

height:图像的高度(像素/相对于父元素的百分比)

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

水平线标签:<hr>

每次修改完页面都要ctrl+s保存，才可刷新网页

样式

方式一

行内样式
<hl style="color: red;">努力学习编程</h1>

直接写在body标签范围内

方式二和方式三

其中方式三需要创建一个css文件

颜色表示形式

CSS选择器

用来选取需要设置样式的元素(标签)

以下三个优先级依次增高

元素选择器

span {

color: red;

}
类选择器
.cls {

color: green;

}
ID选择器

#time{
color: #968D92;
}

要先给想变颜色的字用span标签标记，并命名class和id

例如：

超链接

1.超链接
标签:<a>
属性:
href:指定资源访问的url
target:指定在何处打开资源链接
self:默认值，在当前页面打开blank:在空白页面打开
2.CSS属性
text-decoration:规定添加到文本的修饰，none表示定义标准的文本color:定义文本的颜色

正文

排版

1.音频、视频标签
<audio> <video>
2.换行、段落标签
换行:<br>;段落:<p>
3.文本加粗标签
<strong>
CSS样式

4.line-height:设置行高
text-indent:定义第一个行内容的缩进text-align:规定元素中的文本的水平对齐方式
5.注意
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符: 

页面

布局标签:实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签:<div><span>
特点:
        div标签:
                一行只显示一个(独占一行)
                宽度默认是父元素的宽度，高度默认由内容撑开
                可以设置宽高(width、height)

        span标签:
                一行可以显示多个
                宽度和高度默认由内容撑开.
                不可以设置宽高(width、height)

marge:0 auto; 0代表上下，auto浏览器自动计算左右

CSS盒子模型
组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)
CSS属性
width:设置宽度
height:设置高度
border:设置边框的属性，如:1px solid #000;
padding:内边距
margin:外边距
注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding-top、padding-left、padding-right ...

实验过程及结果记录

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: #4d4f53;
        }

        #time {
            color: #968d92;
            font-size: 13px;
        }

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

        p {
            text-indent: 35px;
            line-height: 40px;
        }

        #plast {
            text-align: right;
        }
        #center {
            width: 65%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="center">
        <img src="img\news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪新闻</a>>正文
    <h1>吃得饱饭</h1>
    <hr>
    <span id="time">2023年03月02日 21：50</span> <span><a href="https://news.cctv.com/" target="_blank">央视网</a></span>
    <hr>
    <video src="video\1.mp4" controls width="950px"></video>
    <P>
        <strong>重磅消息消息</strong>(焦点访谈):******
    </p>
    <P>
        人勤春来早，春耕农事忙。立春之后，由南到北，春天的田野处处生机盎然。
    </P>
    <img src="img\1.jpg">
    <p>
        ******
    </p>
    <img src="img\2.jpg">
    <p>
        ******
    </p>
    <p id="plast">
        责任编辑:******
    </p>
    </div>
</body>

</html>

实验结果

说明以下，提交的代码用******代替了很多文字是为了审核通过，这里懂得都懂！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img\huawei.jpg" width="100px"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img\alibaba.jpg" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>

</html>

刷新网页

表单标签

表单标签:<form>
表单属性:
        action:表单数据提交的url地址
        method:表单提交方式
                get:表单数据拼接在url后面，?username=java,大小有限制

                post:表单数据在请求体中携带，大小没有限制
注意:表单项必须有name属性才可以提交