前端(web)知识-html

前端由三部分组成:

HTML(标签)——CSS(美化,修饰)——JS(执行指令)

HTML(超文本标记语言,Hypertext Markup Language):是一种用于创建网页的标记语言。

本质上为根据浏览器可识别的规则,我们按照规则写网页,浏览器按照规则渲染网页。

网页扩展名:.html或者.htm

HTML文档结构

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

 

1.<!DOCTYPE html>为HTML5文档。

2.<html>、</html>为文档开始和结束标记,它们之间是文档的头部(head)和主体(body)。

3.<head>、</head>定义html文档开头内容,他们之间的内容不会在浏览器窗口显示

4.<title>、</title>定义了网页标题,在浏览器标题栏显示。

5.<body>、</body>之间的文本为网页可见内容。

HTML标签格式

  • html标签:一般形式如<html>, <div>等,通常成对出现,如<div>和</div>,第一个标签是开始,第二个标签是结束。
  • 也有一部分标签单独呈现,比如:<br/>、<hr/>、<img src="1.jpg" />等。

几个很重要的属性:

  •  id:定义标签的唯一ID,html文档树中唯一。
  • class:为html元素定义一个或多个类名(classname)
  • style:规定元素的行内样式HTML常用标签

HTML常用标签:

head内常用标签

head内常用标签

标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表

 

body内常用标签

基本标签(块级标签和内联标签)

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

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

<!--水平线--><hr>

特殊字符

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

 

div标签和span标签

div标签用来定义一个块级元素,并无实际的意义。

span标签用来定义内联(行内)元素,并无实际的意义。

块级元素与行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。

img标签

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

a标签(超链接标签):实现跳转

       所谓的超链接是指从一个网页指向一个目标的链接,这个目标可以是1.另一个网页

                                                                                                                 2.同一网页上不同位置,这个位置可以是一个图片、邮箱地址等

URL定义
      URL(统一资源定位器,Uniform resource locator):又为网页地址,是因特网上标准的资源地址
URL举例(上下为同一个搜索结果)
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL由4部分组成
第一部分:http://、ftp://等为协议
第2部分:www.sohu.com为域名
             222.172.123.33为IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。
<a href="https://www.cnblogs.com/aaronthon/p/8507310.html" target=" _blank">戳我</a>

href属性:指定目标网页地址,有3种类型

  1. 绝对URL:完整路径(https://www.cnblogs.com/aaronthon/p/8507310.html)
  2. 相对URL:部分路径(aaronthon/p/8507310.html)
  3. 锚URL:指向页面中的锚(href="#top")

target:

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

列表

1.无序列表(unorder list)

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

2.有序列表(order list)

<ol type="1">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表(definition list)(自定义列表)

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

 

form(表单)标签

<form action="">
    <input type="text" name="name1">
    <input type="password" name="pwd">
    <button type="submit">提交</button>
</form>

包含三部分:

  1. form标签,action属性是URL(提交路径)
  2. input标签,type属性有text、password等
  3. button按钮,type属性必须是submit。

功能:

  1. 向服务器传输数据,实现用户与web服务器的交互
  2. 可包含input、textarea、select、fieldset和 label标签。

 

表单属性

属性 含义
action URL 指定一个表单处理目标URL,表单数据将被提交到该URL地址的处理程序。如果该属性值为空,则提交到文档自身。
method get或post 将表单数据提交到http服务器的方法,默认为get

 

表单元素

基本概念:
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理:
访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息

 



 

前端(web)知识-html

上一篇:二进制安装kubernetes1.16.10


下一篇:asp.net core 不依赖autofac实现aop