2021-5-13web前端开发2htmlfor小白

最新推荐文章于 2024-07-13 10:22:10 发布

銘澤

最新推荐文章于 2024-07-13 10:22:10 发布

阅读量77

点赞数

分类专栏： web基础文章标签： web html5

本文链接：https://blog.csdn.net/weixin_42522733/article/details/116717868

版权

web基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML部分快速学习，我如果起个题目，就应该是，HTML从入门到精通
狗头

文章目录

前言
一、标签
总结

前言

HTML语言包括标签、元素、属性

HTML是超文本标记语言，他是制作网页的标准语言，特点是不区分大小写。

一、标签

尖括号包围，成对出现
例如第一个是开始标签，第二个是结束标签
反斜杠也有的卸载后面，这种通常不是成对的文字，例如：
标签是是有级别的，外层是父元素，内层是子元素，同级别的是兄弟元素。
一个标签可能有多个属性，属性的先后顺序无关

<img src="" alt="">

head头部标签包括浏览器、搜索引擎所需要的信息
body主题是网页中包含的具体内容

<!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>Document</title>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
代码中的这句话意思是，文档类型符合HTML5标准
lang属性：搜索引擎，en表示英文，zh表示中文
meta标签表示元数据。。。具体的我不懂，后面再查，据说和搜索引擎的分类有关
meta标签中有多种属性，如：charset属性能够设置字符集编码方式，UTF-8是国际编码。

下面介绍一些常用标签：
h1~h6一级标题到六级标题，一个页面建议只有一个h1

<h1><h1>

段落p，每个段落自动换行，段落内部文字忽略连续空格，也不会显示空行，且不会换行。

<p><p>

段内换行

<br/>

空格字符

&nbsp

预留格式pre,适合显示计算机代码

<pre></pre>

行内组合span，组合行内元素，以便通过css样式来格式化

<span></span>

水平线hr

<hr/>

注释

<!--内容-->

超链接a，herf为#设置虚拟超链接，herf可以连接到本站点其他网页，也可以链接到其他站点。

<a herf = "网址">文字或图片</a>
<a herf = "#">文字或图片</a>

img标签
首先说一下图像格式
GIF简单动画、背景透明
透明可以给图片指定一种颜色，使其不被显示而成为透明
PNG无损压缩、透明交错、动画
交错再显示图片的过程中可以从概貌逐渐变化到全貌，看上去也就是清晰度的从小变大。
img的src属性为文件目录，可以写绝对路径，也可以写相对路径。
两张图片说明白，什么是绝对路径，什么是相对路径。
在这里插入图片描述

<img src="" alt="">

div标签，是一个区域，确定的一个单独的区域，如页面的一个组成部分、一个栏目板块

    <div align = "center">
    </div>

无序列表ul，列表项li
跟markdown一样

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

有序列表ol，列表项li

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

表格table、tr、td
table>tr2>td3

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

在这里插入图片描述
表头单元格

<table>
    <tr>
        <th>班级</th>
        <th>学生数</th>
        <th>平均成绩</th>
    </tr>
    <tr>
        <td>一班</td>
        <td>30</td>
        <td>89</td>
    </tr>
    <tr>
        <td>二班</td>
        <td>35</td>
        <td>85</td>
    </tr>
    <tr>
        <td>三班</td>
        <td>32</td>
        <td>80</td>
    </tr>
</table>

form标签
表单：表单是一个区域，采集用户信息
表单元素：文本框、按钮、单选、复选、下拉列表、文本域

<form action="数据处理网页">表单元素</form>

imput文本框、密码框

<form action="数据处理网页">
    账户：<input type="text"/>
    <br/>
    密码：<input type="text" />
</form>

type：
文本框：type=“text”
密码框：type=“password”

input提交按钮
type=“submit”
可以设置value属性，为按钮显示的文字

input重置按钮
type=“reset”
可以设置value属性，为按钮显示的文字

input单选框radio|复选框checkbox
type=“radio|checkbox”
可以设置value属性，为按钮显示的文字
checked="checked"这个属性表示该选项默认被选中

下拉列表框select、option

<select name="" id=""><option value=""></option></select>

selected="selected"表示被选择的那一项，默认

Textarea文本域

<textarea name="" id="" cols="行数" rows="列数">这里是提示性文本</textarea>

em强调标签，斜体

<em>强调</em>

strong重点强调，粗体

<strong>强调</strong>

自定义列表dl、列表项dt、描述dd

<dl>
	<dt>HTML</dt>
		<dd>超文本标记语言</dd>
	<dt>CSS</dt>
		<dd>层叠样式表</dd>
</dl>

在这里插入图片描述

总结

薛仁贵征东——劳而无功

銘澤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-5-13web前端开发2htmlfor小白

HTML部分快速学习，我如果起个题目，就应该是，HTML从入门到精通狗头文章目录前言一、标签二、使用步骤1.引入库2.读入数据总结前言HTML语言包括标签、元素、属性HTML是超文本标记语言，他是制作网页的标准语言，特点是不区分大小写。一、标签尖括号包围，成对出现例如第一个是开始标签，第二个是结束标签反斜杠也有的卸载后面，这种通常不是成对的文字，例如：标签是是有级别的，外层是父元素，内层是子元素，同级别的是兄弟元素。一个标签可能有多个属性，属性的先后顺序无关<img
复制链接

扫一扫