前端-html

最新推荐文章于 2023-10-09 09:41:06 发布

July-Mao

最新推荐文章于 2023-10-09 09:41:06 发布

阅读量739

点赞数

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

本文链接：https://blog.csdn.net/mf_happying/article/details/78283637

版权

python 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

大纲：
1.html基础知识
2.html标签讲解
使用测试工具pycharm+chrome浏览器客户端
html基础知识
一.什么是html超文本传输
html：一套规则，一套浏览器认识的规则
html文件的后缀不一定为.html
二.html标签
1.标签分成两部分，两个标签之间的称为标签体
2.标签由一对尖括号包裹单词构成，标签中单词不可以已数字开头
3.标签可以嵌套，但不可以交叉嵌套，标签都是成对出现的
三.标签的属性
1.以键值对的方式出现
2.属性出现在开始标签或者自闭和标签里面
3.属性名全部小写，属性值全部用单引号或者双引号包裹
4.如果属性名和属性值相同，写一个即可，例readonly
四.html文件的编写

1.<!DOCTYPE html>统一在不同的浏览器能有统一的渲染标准，开启标准模式（W3C）
2.html文件的注释<!--注释内容-->
3.一个html文件中只能有一个html标签
4.在head标签中除了title标签，其余都看不见

五.标签的分类

1.自闭合标签<br/><input/><img/>
2.普通标签<html></html>

html标签讲解
一.head-头部标签
1.meta
meta标签组成：两个属性，分别是http-equiv和name
1)name属性-描述网页，与之相对应的属性是content-便于查找信息和分类信息

<meta name="keywords"content="百度">
<meta name="description"content="百度是一家...">

2)http-equiv-http头文件作用，向浏览器传回一些信息，帮助正确显示网页内容，与之相对应的属性是content-各个参数变量

<meta http-equiv="refresh"content="2">  
2s之后刷新一下本网页
<meta http-equiv="refresh"content="2;https://www.baidu.com"> 
2s后跳转到百度
<meta http-equiv="content-type"charset="UTF-8">
编码方式是utf8
<meta http-equiv="x-ua-compatible"content="IE=...">
只适用于ie浏览器

2.title标签-标题

<title>HELLO CHINA</title>

3.link-链接图标

<link rel="icon"href="jingdong.ico">

这里写图片描述
二.body标签

1.正文内容字体h1格式的是最大最粗越到后面越小
  <h1>内容</h1>
  <h2>内容</h2>...
2.换行标签<br/>(自闭合标签)
  <h3>hello<br/>world</h3>
3.段落标签--自动换行，中间多出一行空白行
  <p>hello world</p>
  <p>how are you</p>
4.划除标签
  <strike>百度一下吗</strike>
5.块级标签(白板)block-div
  <div style="color: darkgreen">hello div</div>
  <div style="background-color:green">hello div</div>
  由此可见块级标签长度是占一整行
  hello before<div>hello div1</div>
  div标签会自动换行，但是中间不会多出一行空白行
6.内敛标签in-line-span标签
<span style="background-color: blue">hello everything</span>
  由此可见，内联标签不换行，同时标签的长度只占文本长度
  注意：多有的标签统分为块级标签和内联标签
7.加粗字体
  <b>字体加粗</b>
8.字体变斜
  <em>字体倾斜</em>
9.删除
  <del>delete</del>
10.2<sub>3</sub>
11.2<sup>3</sup>
注意：html存在很多的特例符号需要时可以百度查询使用

以上body标签的测试结果
这里写图片描述

12.img标签
<img src="1.jpg" width="200px"height="300px"alt="haha"title="beauty">
alt--图片加载不出来时显示haha
title--鼠标悬浮在图片上的时候显示beauty
13.a标签
(1)超链接
<a href="http://www.baidu.com"target="_blank">baidu</a>
(2)锚
点击chapter one能够跳转到第一章
点击chapter two能够跳转到第二章
div的id是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLO CHINA</title>
    <style>
        #div1{color: rebeccapurple;background-color: aqua;height: 600px}
        #div2{color: green;background-color: antiquewhite;height: 600px}
    </style>

</head>
<body>
    <a href="#div1">chapter one</a>
    <a href="#div2">chapter two</a>
    <div id="div1">第一章</div>
    <div id="div2">第二章</div>

</body>
</html>

14.列表
a.不排序列表
<ul>
    <li></li>
</ul>
b.有序列表
<ol>
    <li></li>
</ol>
c.定义列表
<dl>
    <dt></dt>
    <dd></dd>
</dl>

15.表单标签-form----向后台提交数据
<form action="http://192.168.0.19:8089/index"method="get">
    <p>姓名：<input type="text" name="user" value="11"></p>
    <p>密码：<input type="text" name="pwd" value="12"></p>
    <input type="button" name="提交1">
    <input type="submit" name="提交2">
    <p>篮球：<input type="checkbox" name="hobby" value="101"></p>
    <p>足球：<input type="checkbox" name="hobby" value="102"></p>
    <p>羽毛球：<input type="checkbox" name="hobby" value="103"></p>
    <p>男：<input type="radio" name="sex" value="21"></p>
    <p>女：<input type="radio" name="sex" value="22"></p>
</form>
form表单总结
a.action-要提交的url地址
b.method有两种方式：get和post
1)get在地址栏显示所有提交的键值对信息，安全性低，能够提交的内容长度有限
2)post不存在地址栏，安全性高，对提交的内容的长度不受限制
input-自闭合标签
a.type属性
1)submit-提交
2)button-提交，单独不可以使用，需要配合js一起使用
3)checkbox-多选框
5)radio-单选框
6)file-文件 需要name=文件名
7)text-文本信息
8)reset-重置
b.name属性--信息归类
c.value属性-值
name和value形成键值对

16.select标签
<select name="city" multiple size="3">
    <optgroup label="北京">
        <option value="1">三里屯</option>
        <option value="2">朝阳</option>
        <option value="3">天安门</option>
        <option value="4">王府井</option>
        <option value="5">中关村</option>
    </optgroup>
</select>
multiple--多个显示
size--最多显示多少
17.textarea
<textarea rows="20" cols="20">自我介绍</textarea>
18.label标签联合input一起使用--点击姓名，和姓名关联的提交按钮光标获取联动
<label for="username">姓名</label>
<p><input id="username" type="submit" value="send"></p>