前端之HTML

时间：2019-05-28 19:54:09 阅读：165 评论：0 收藏：0 [点我收藏+]

标签：列表 name 版权 row eth 资源水平单元 cti

前端

1. 什么是前端

任何直接能够跟用户打交道的交互界面都可以称之为前端

2.软件开发架构

C/S架构
B/S架构
本质上B/S架构也是C/S架构

3.浏览器输入网址，发生了几件事

输入网址
朝服务端发送get请求
服务器接收请求并查询浏览器想要的数据返回给浏览器
浏览器拿到数据，展示页面

4.HTTP协议

超文本传输协议
客户端、服务端在数据交互的时候都必须遵循这套协议

HTML

1.html文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的-->
    <title>css样式优先级</title>
</head>
<body>
    <!--用户能够看见的内容都在body里面-->
    <!--这是单行注释-->
    <!--
    这是多行注释
    -->
</body>
</html>

2.html文件打开方式

找到该文件选择浏览器打开
pycharm内自动打开

3.head内常用标签

<title>  </title>  <!--页面标题-->
<style>  </style>  <!--写css代码-->
<script> </script> <!--内部可以直接写js代码，也可通过src属性引入外部js代码文件-->
<link rel="stylesheet" href=""> <!--通过hre引入外部css文件-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--2秒后跳转到对应的网址，注意引号(了解)-->
    <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
    <title>这是我的第一个前端页面</title>
    <style>
        h1 {
            color: green;
        }
    </style>
    <script>
        alert('hello baby~')
    </script>
    <script src="04%20myjs.js"></script>
    <link rel="stylesheet" href="03%20mycss.css">
</head>
<body>
<h1>来啦 老弟！</h1>
</body>
</html>

4.body内标签

基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

<!--换行-->
<br>

<!---水平线--> <pr>

特殊符号

&nbsp;  <!--空格-->
&gt;    <!-->-->
&lt;    <!--<-->
&amp;   <!--&-->
&yen;   <!--￥-->
&copy;  <!--版权-->
&reg;   <!--注册-->

常用标签
div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：

? 所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

注意：关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含p标签

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至一个应用程序

所有的html标签都应该有一个id属性，用来唯一标识当前标签为后续的DOM操作提供基础
也就意味着同一份html中标签的id不能重复，不写id属性也是可以的

补充:URL
1. 什么是url
  
  URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
  
  URL举例
  http://www.sohu.com/stu/intro.html
  http://222.172.123.33/stu/intro.html
2. URL地址由4部分组成
  
  第1部分：为协议：http://、ftp://等
  第2部分：为站点地址：可以是域名或IP地址
  第3部分：为页面在站点中的目录：stu
  第4部分：为页面名称，例如 index.html
  各部分之间用“/”符号隔开。各部分之间用“/”符号隔开。
```
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
```
href属性指定目标网页地址。该地址可以有几种类型:
- 绝对URL - 指向另一个站点（比如 href=“http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href=“index.htm”）
- 锚URL - 指向页面中的锚（href=“#top”）
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
标签分类
标签分类1:

双标签：h1-h6 p a

自闭和标签：img br hr
标签分类2:

块儿级标签：div h1-h6 p hr br
1. 独占一行
2. 块儿级标签能够嵌套块儿级标签和行内标签
3. P标签虽然是块儿级标签但是它不能嵌套任何块儿级标签，块级儿标签能够设置长宽
行内标签：span a img i s b u
1. 自身内容有多大就占多大
2. 行内标签不能设置长宽

列表

无序列表
```
<ul type='disc'>
    <li>第一项</li>
    <li>第二项</li>
</ul>
```
type属性：
- disc 实心圆点，默认值
- circle 空心圆圈
- square 实心方块
- none 无样式
有序列表
```
<ol type='1' start='2'>
    <li>第一项</li>
    <li>第二项</li>
</ol>
```
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- I 大写罗马
- i 小写罗马

标题列表

<dl>
   <dt>标题1</dt>
    <dd>内容1</dd>
   <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

表格

<table border="1">
  <thead>
     <tr>
          <th>序号</th>
      <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>ymg</td>
        <td rowspan="2">read</td>
    </tr>
    <tr>
      <td>2</td>
        <td>dsw</td>
        <td colspan="2">日天</td>
    </tr>
    </tbody>
</table>

属性：

tr：一个tr表示一行
border：调整列表的边框
cellpadding：调单元格与外边框之间的距离(内边距)
cellsapcing：调文本与单元格之间的距离(外边距)
width：像素，百分比(最好通过css来设置长宽)
rowspan：垂直方向合并
colspan：单元格横跨多少列(水平方向合并)

from表单

功能：获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作，那么可以直接写一个button按钮()

1.form表单中的几个重要属性

action:用来控制数据到底提交给谁写URL来指定提交给谁
form表单默认是get请求可以通过method属性修改提交方式
form表单中需要给每一个获取用户输入的标签加上name属性，用来标识当前数据的类型可以将name属性当做字典的key，用户输入的当做字典的value 并且可以手动设置value值
form表单发送文件需要修改entype属性的值
- 默认是urlencoded不支持传输文件
- 需要将其修改为multipart/form-data

2.form表单元素

input

<#input> 元素会根据不同的type属性，变化为多种形态

type属性值	表现形式	对应代码
text	单行输入文本	<#input type=text” />
password	密码输入框	<#input type="password" />
date	日历	<#input type="date" />
checkbox	多选框	<#input type="checkbox" checked="checked" />
radio	单选框	<#input type="radio" />
submit	提交按钮	<#input type="submit" value="提交" />
reset	重置按钮	<#input type="reset" value="重置" />
button	普通按钮	<#input type="button" value="普通按钮" />
hidden	隐藏输入框	<#input type="hidden" />
file	文本选择框	<#input type="file" />

属性说明：

name:表单提交时的“键”，注意与id的区别
value:变淡提交时对应项的值
- type=“button”, “reset”, “submit”时，为按钮上显示的文本内容
- type=“text”,“password”,“hidden”时，为输入框的初始值
- type=“checkbox”, “radio”, “file”，为输入相关联的值
checked:radio和checkox默认被选中的乡
readonly:text和password设置只读
disabled:所有input均适用

select标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

textarea多行文本
```
<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
```
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用

<!--示例-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>用户注册</h3>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
    <p>username:<input type="text" name="username" value="jason"></p>
    <p>password:<input type="password" name="password"></p>
    <p>birth:<input type="date" name="birthday"></p>
    <p>gender:
        男<input type="radio" name="gender" value="0">
        女<input type="radio" name="gender" value="1" >
        保密<input type="radio" name="gender" checked value="2">
    </p>
    <p>hobby:
        <input type="checkbox" checked name="hobby" value="basketball">篮球
        <input type="checkbox" checked name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="doublecolorball">双色球
    </p>
    <p>province默认单选:
        <select name="province" id="">
            <option value="beijin">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
    </p>
    <p>province多选:
        <select name="" id="" multiple>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>province1:
        <select name="" id="">
            <optgroup label="北京">
                <option value="">朝阳区</option>
                <option value="">海淀区</option>
                <option value="">昌平区</option>
            </optgroup>
            <optgroup label="上海">
                <option value="">浦东新区</option>
                <option value="">静安区</option>
                <option value="">徐汇区</option>
            </optgroup>
            <optgroup label="深圳">
                <option value="">南山区</option>
                <option value="">宝安区</option>
                <option value="">福田区</option>
            </optgroup>
        </select>
    </p>
    <p>info:
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </p>
    <p>file:
        <input type="file" name="file">
    </p>
    <input type="submit" value="注册">
    <input type="button" value="普通按钮">
    <input type="reset" value="重置">
    <button>button按钮</button>
</form>
</body>
</html>

前端之HTML

标签：列表 name 版权 row eth 资源水平单元 cti

原文地址：https://www.cnblogs.com/majingjie/p/10939761.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

前端之HTML

前端

1. 什么是前端

2.软件开发架构

3.浏览器输入网址，发生了几件事

4.HTTP协议

HTML

1.html文档结构

2.html文件打开方式

3.head内常用标签

4.body内标签

基本标签

特殊符号

常用标签

标签分类

列表

表格

from表单