html

HTML

HTML(hypertext markup language) 超文本标记语言.

HTML的注释

<!--单行注释-->

<!--
多行注释1
多行注释2
多行注释3
-->

搭建前端的时候,常用注释来划分区域
<!--开始-->
代码内容
<!--结束-->

HTML的文档结构

<!DOCTYPE html>   <!--只是web浏览器关于页面使用哪个HTML版本进行编写的指令>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>test</title>
</head>    <!--head部分给浏览器看的-->
<body>
		   <!--head部分给浏览器看的-->
</body>
</html>

eg:
<h1>一级标题</h1>
<a href="https://www.baidu.com"></a>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574164236&di=673d71a348017105679b4a79b29b5ba3&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.178.com%2Fnews%2F201706%2F292032664119%2F292033211715.jpg" alt="无法显示后提示的信息">
</body>
</html>

标签的分类

按是不是两头都有

双标签(h1,a)
自闭合标签(img)

按占空间分

块级标签 (h1~h6, p,br,hr,div)

独占一行

块级标签内可以嵌套其他块级标签和行内标签

特例:p中只能嵌套行内标签
行内标签(u,i ,s,b span)

行内部文本多大,就占多大

行内不能嵌套行内和块级

标签的属性

标签通常应该由的三个属性
- id 类似于身份证号,每一个标签都应该有id值,同一个HTML文档中,标签的id不能重复
- class 类属性,类似面向对象类的继承,class = 'c1,c2,c3' 这个标签就拥有c1,c2,c3的所有样式
- style 规定元素的行内样式(CSS样式)

head内常用标签

title 定义网页标题

style 内部支持写css代码

link 引入外部css样式文件

script 内部可以直接写js代码也可以引入外部js文件

meta 定义网页源信息

<!--keywords表示搜啥可以搜的到-->
<meta name="keywords" content="动漫,新番,音乐,专辑,BT,游戏,手办,同人,东方,萌化,美工,汉化,galgame,漫画,同人志,同人本,呲哩呲哩 - cilicili.cc">
<!--description表示搜索后显示的内容-->
<meta name="description" content="「 动漫• 二次元 • ACG • 萌导航」人生本来很简单，只要快乐就好。 ">

body内常用标签

标签	含义
h1~h6	标题标签
p	段落标签,一个p就是一行内容
u	下划线
i	斜体
s	删除线
b	加粗
br	换行
hr	一条分割线

body内特殊符号

标签	含义
&nbsp	空格
&amp	&
&yen	￥
&gt	>
&lt	<
&copy	©
&reg	®

body内的重要标签

div 一块区域,可以在块区内填写任何内容

span 用来组合行内元素，以便通过样式来格式化它们。

div和span是前期构建网页的基本骨架

a 链接标签

跳转功能 herf参数控制跳转的地址
- 一个地址如果在机器上没有被点击过,默认为蓝色,点击过后,变为紫色
- a标签默认是在当前窗口跳转
  
  target = '_self' (默认)
  
  target = '_blank' 打开新的标签页

锚点功能

在a标签设置id值

然后再href中传入对应a标签的id值,点击即可跳转到对应的位置

<a href="" id="a1">文章开头</a>
<div style="background-color: red;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="" id="a2">文章中部</a>
<div style="background-color: black;height: 1000px"></div>
<div style="background-color: green;height: 1000px"></div>
<div style="background-color: orange;height: 1000px"></div>
<a href="#a1">回到顶部</a>
<a href="#a2">回到中部</a>

img 图片标签
- src
  - 1.图片地址可以是本地图片地址
  - 2.url(网址) 自动向该网址发送get请求,获取图片资源
- alt
  - 当前图片无法加载的时候,显示的提示信息
- title
  - 鼠标悬浮在图片上的提示信息
- width和heigth
  - 二者其一设置一个就可以,默认等比例缩放,
  - 两个都改会导致图片失真

列表标签

无序列表

ul
	li
type参数
	disc 实心圆点,默认值
	circle 空心圆点
	square 实心方块
	none 无样式

有序列表

ol
	li
type参数
    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马

标题列表

dl
	dt 小标题
	dd 小章节

表格标签

展示数据用

<table>
    <thead>
        <tr>
            <th>username</th>
            <th>password</th>
            <th>hobby</th>
            <th>is_delete</th>
        </tr>  一个tr就表示一行
    </thead>
    <tbody>
        <tr>
            <td>jason</td>
            <td>123</td>
            <td>study</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

一个tr表示一行

一个td或者th表示一个字段或者字段内容

ex:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<h1>一级标题</h1>
<a href="https://www.baidu.com"></a>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574164236&di=673d71a348017105679b4a79b29b5ba3&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.178.com%2Fnews%2F201706%2F292032664119%2F292033211715.jpg" alt="无法显示后提示的信息">
<img src="111.jpg" alt="">
<p>段落</p>
<u>下划线</u>
<s>删除线</s>
<b>加粗</b>
<p>666666</p>
<br>
<p>666666</p>
<p>1111111111111</p>
<hr>
<p>11111111111111</p>
</body>
</html>

form表单

用来获取用户的输入(输入,选择,上传的文件)

再将获取的到的数据打包发送给后端.

参数

action 控制数据提交的地址

三种模式:
1. 不写默认值是向当前这个页面所在的地址提交数据
2. 写全路径(https://www.baidu.com)
3. 只写路径后缀(/index/)\
method 控制数据提交的方式
- get form表单的默认格式,
- post

input

type参数

text 普通文本
password 输入的内容,在浏览器中会显示成密文
date 日期
radio 可选圆圈当两个radio 的name属性相同时,变为单选
checkbox 可选方框多选
hidden 隐藏
file 传文件如果要向后端传输文件,需要将form 中enctype属性改为 enctype="multipart/form-data"
button 普通按钮自身没有含义,可以给它绑定js事件
reset 重置按钮
submit 提交按钮能够自动触发form表单提交数据的动作

其他属性

disable属性禁用该input框
value 用来设置默认值
checked 在radio和checkbox中,默认选中

注意:当属性名和属性值相同的时候,可以只写属性名

select标签

下拉栏

一个个option标签就是一个个的选项

<p>provincesel
    <select name="province" id="">
        <option value="sh">sh</option>
        <option value="bj">bj</option>
        <option value="sz">sz</option>
    </select>
</p>

默认是单选

可以给select标签添加一个multiple参数就可以变成多选(crtl 或shift那种多选)

testarea

获取大段文本

触发form表单提交数据的动作

input标签的type=submit属性

<p><input type="submit"></p>执行后会自动生成一个submit提交按钮
button标签
```
<p>
    <button>button</button>
</p>
```

注意:

所有获取用户输入的标签,都应该有name属性

name属性就类似于字典的key,input框获取到的用户输入会放到input框的value属性中,存在列表中
选择框通过value属性将数据传到后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>
<h1>register</h1>
<form action="http://127.0.0.1:8000/index/"></form>
    <p>username:
        <input type="text" name = "username">
    </p>
    <p>password:
        <input type="password" name = "password">
    </p>
    <p>birth:
        <input type="date" name = "birth">
    </p>
    <p>gender:
        male<input type="radio" name = "gender">
        female<input type="radio" name = "gender">
    </p>
    <p>
        <input type="reset" value = "reset">
        <input type="submit" value="submit">
    </p>
</body>
</html>

posted @ 2019-11-12 21:23 Agsol 阅读(154) 评论(0) 编辑收藏举报

刷新页面返回顶部