前端--HTML

最新推荐文章于 2024-08-14 12:55:09 发布

玫瑰花的葬礼。

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量156

点赞数

分类专栏：前端文章标签： html css web javascript python

本文链接：https://blog.csdn.net/nmb_jiang/article/details/108188484

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初识HTML

HTML(超文本标记语言)是一种用于创建网页的标记语言，它不是一种编程语言，不像python，本身并没有什么逻辑可言。
最基本的HTML文档结构：

<!DOCTYPE html>  <!--声明为HTML文档类型-->
<html lang="en">  <!--HTML页面的根元素-->
<head>  <!--定义了HTML文档的开头部分。包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。-->
    <meta charset="UTF-8">
    <title>Title</title>  <!--title元素描述了文档的标题-->
</head>
<body> <!--包含可供用户可见的页面内容-->

</body>
</html>

HTML常用标签

标签语法：

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> 
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

pycharm中的代码为：

</head>
<body>
<a name="top">这是顶部</a>
<b>加粗的内容</b>
<i>斜体</i>
<u>下划线</u>
<br>    <!-- 换行-->
<s>删除</s>
<p>段落标签</p> <!-- 独占一个段落-->
<!--<h1>标题</h1>-->
<div style="">
    <a href="http://www.baidu.com" target="_blank">点我</a>
<hr>  <!--姨妈射线-->
    <img src="下载.jpg" alt="死亡小学生..." width="200" height="200" title="柯南">
</div>
<hr>
<div style="">
    <p>真相只有一个...</p>
</div>
<hr>
<ul type="square">
    <li>老王</li>
    <li>老刘</li>
    <li>老赵</li>
</ul>
<ol start="a">

    <li>王八</li>
    <li>王久</li>
    <li>王十</li>
</ol>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<a href="#top">回到顶部</a>
</body>
</html>

浏览器效果图：
在这里插入图片描述

head内常用标签：

<tilte></title>：定义网页的标题
<style></style>：定义内部样式表
<script></script>：定义JS代码或引入外部JS文件
<link/>：引入外部样式表文件
<meta/>：定义网页元信息

body基本标签：

<!--内联标签，不独占一行，不能不能包含块级标签,只能包含内联标签-->
	<b>加粗</b>
	<i>斜体</i>
	<u>下划线</u>
	<s>删除</s>
	<img src="1.png" alt="这是个美女..." width="200" height="200" title="美女">  #src属性='图片路径' alt属性='图片加载失败的提示信息'  title='鼠标悬浮提示信息'(title属性不单单是img标签的)
	<a href="">百度</a>  #显示普通文本。写了href属性,但是里面没有值,效果:有特殊效果,文字有颜色,有下划线,点击会刷新当前页面；
	有属性有值的:<a href="http://www.baidu.com"  target="_blank">百度</a>,跳转到href属性指定的网址，
	target="_blank"：在新的标签页打开,默认是在当前标签页打开：target="_self"
	<!--块级标签，独占一行,可以包含内敛标签和某些块级标签-->
	<p>段落标签</p>	 #段落之间会空一行，标签内部不能包含块级标签和p标签
	<h1>标题1</h1>  #h1~h6为标题标签，其中h1最大，h6最小
	<br>		#换行
	<hr>     #水平线
	
	<!--锚点：当浏览至网页的底部时单击锚点回到网页顶部-->
	<!-- 设置锚点 方式1 -->
	<a name="top">这是顶部</a>
	<a href="#top">回到顶部</a>

列表标签：

<!--无序列表-->
<ul type="square">
    <li>老王</li>
    <li>老刘</li>
    <li>老赵</li>
</ul>
<!--
无序列表type属性对应的值：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
-->

<!--有序列表-->
<ol start="a">
    <li>王八</li>
    <li>王久</li>
    <li>王十</li>
</ol>
<!--
有序列表type属性对应的值：start属性是从数字几开始
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
-->

<!--标题列表-->
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

在这里插入图片描述

table标签：

<table border="1" cellspacing="10" cellpadding="20"> #border: 表格边框;
cellpadding: 内边距 （内边框和内容的距离）;cellspacing: 外边距.（内外边框的距离）
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">王八</td> #colspan: 单元格横跨多少列（即合并单元格）
<!--<td>18</td>-->
        <td rowspan="3">篮球</td> #rowspan:单元格竖跨多少行
    </tr>
    <tr>
        <td>王久</td>
        <td>18</td>
<!--<td>篮球</td>-->

    </tr>
    <tr>
        <td>王十</td>
        <td>18</td>
<!--<td>篮球</td>-->
    </tr>
    </tbody>
</table>

在这里插入图片描述
form表单标签和label、input标签：
form表单标签把前端用户产生的数据传输到后端web服务器。

<body>
<!--action属性:值是一个网址,将数据提交到哪个网址去；
method属性:提交方法,默认是get,效果是在网址上可以看到提交的数据-->
<form action="http://127.0.0.1:8080" method="get">
<label for="username">用户名:</label>
<!--用户名:-->
<!--input文本输入框,input标签如果想将数据提交到后台,那么必须写name属性-->
<input type="text" id="username" name="username"> 
<label>
    密码 <input type="password" name="password">
</label>
<div>
    <label>
        性别:
    <!--input选择框,必须写name属性和value属性，name值相同的算是同一组选择框-->
    <input type="radio" name="gender" value="1">男 
    <input type="radio" name="gender" value="2">女
    </label>
</div>

<div>
    <label>
        爱好:
        <input type="checkbox" name="hobby" value="1" checked>抽烟
        <input type="checkbox" name="hobby" value="2">蹦迪
        <input type="checkbox" name="hobby" value="3">渣男大波浪
        <input type="checkbox" name="hobby" value="4">渣女锡纸烫
    </label>


</div>
<div>
    <label>
        出生日期:
        <input type="date">
    </label>
</div>
<div>
	<!--想通过form表单标签来提交用户输入的数据,必须在form表单里面写
	你的input标签,并且必须有个提交按钮,按钮有两种,1:  input标签type='submit', 2: botton按钮-->
    <input type="submit" value="提交">
</div>
<div>
    <input type="reset" value="重置">
</div>


</form>
</body>

在这里插入图片描述

select标签：

<form action="http://127.0.0.1:8080" method="get">
<label >
    <select name="" id="" multiple> <!--multiple属性:多选;name属性提交数据时
    的键,option标签中value属性的值需要写,是将来提交数据的真实数据-->
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
</select>
</label>
</form>

在这里插入图片描述
textarea标签：
多行文本输入框。

<label>
	<!--name：名称;rows：行数  #相当于文本框高度设置;cols：列数   #相当于文本框长度设置;
	disabled：禁用;maxlength：显示字符数，例如：maxlength='10'  最多输入十个字符-->
    <textarea name="memo" id="memo" cols="30" rows="10">
    默认内容
    </textarea>
</label>

玫瑰花的葬礼。

关注

0
点赞
踩
0

收藏

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

初识HTMLHTML(超文本标记语言)是一种用于创建网页的标记语言，它不是一种编程语言，不像python，本身并没有什么逻辑可言。最基本的HTML文档结构：<!DOCTYPE html> <html lang="en"> <head> <!--定义了HTML文档的开头部分。包含了文档的元（meta）数据，如 <meta charset="utf-8"&
复制链接

扫一扫

专栏目录