zoukankan      html  css  js  c++  java
  • Html基础学习

    22:23:32 2019-08-06

    今天记录结束

    12:07:54 2019-08-07

    对html有了基本的了解

     本文资料来源:慕课网 https://www.imooc.com/learn/9/

    超文本标记语言(Hyper Text Markup Language)

     <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

    <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    meta是html的元标签,其中包含了对应html的相关信息,客户端浏览器或服务端程序都会根据这些信息进行处理.
    我们以<meta http-equiv="Content-Type" content="text/html:charset=UTF-8">为例子来说明:
    http类型:这个网页是表现内容用的
    content(内容类型):这个网页的格式是文本的
    charset(编码):这个网页的编码是UTF-8,需要注意的是这个是网页内容的编码,而不是文件本身的.
    编码不用说,content常见的还有xml等类型.meta,网页html语言里head区重要标签之一.
    http-equiv类似于http的头部协议,他回应浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的http-equiv类型有:
    1.Content-Type和Content-Lanauage(显示字符集的设定)
    说明:设定页面使用的字符集,用以说明主页制作所使用的语言和文字,浏览器会根据此来调用相应的字符集显示网页内容.


    同时,与之想像还有这么一句<meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
    该META标签定义了HTML页面所使用的字符集为GB2132,就是国标汉字码.如果将其中的"charset=GB2312"换成"BIG5",则该页面所用的字符集就是繁体中文Big5码.当你浏览一些国外的站点时.IE浏览器会提示你要正确显示该页面需要下载xx语支持.这个功能就是通过读取HTML页面meta标签的Content-Type属性而得知需要使用哪种字符集显示该页面的.如果系统里没有装相应的字符集,则IE就提示下载.其他的语言也对应不同的charset,比如日文的字符集是“iso-2022-jp ”,韩文的是“ks_c_5601”。
    Content-Type的Content还可以是:text/xml等文档类型;
    Charset选项:ISO-8859-1(英文),BIG5,UTF-8,SHIFT-Jis,Euc,Koi8-2,us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集;
    Content-Language的Content还可以是:EN、FR等语言代码。
    charset表示编码
    expires表示过期时间
    set-cookie说明是否存cookie
    Refresh表示重定向(也可以当刷新用)

    来自:SkyTeam_LBM的博客https://www.cnblogs.com/liubeimeng/p/3894177.html

    Html标签

    超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。
    HTML标签的大小写无关的,例如主体<body>跟<BODY>表示的意思是一样的,推荐使用小写。(来自百度)
     
    为了便于访问分布在全世界的文档,HTTP使用了定位符的概念
    URL(统一资源定位符)是一种用于指定因特网上任何类型的信息的标准
    URL定义了四件事:方法、主机、端口号和路径
      方法是存取文档使用的协议,列如:HTTP
      主机是信息所在的计算机,计算机名字可以是别名。web页面通常存储在计算机上,计算机通常被赋予用字符“www”开头的别名。但这不是强制的,因为我们可以给web页面的主机起任何名字
      URL也可以包含服务器的端口号。如果包含端口号,它将被插在主机和路径之间,需要使用分号将它与主机名分隔开
      路径是信息所在的文件路径名。注意路径本身是可以含有斜杠(在Unix操作系统中)的,作用是把目录和子目录和文件分隔开(来自计算机科学导论)
     
    html文件基本结构
    <html>
        <head>...</head>
        <body>...</body>
    </html>

    1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

    2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script><style><link><meta>等标签

    3. 在<body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

     
    了解<head>标签的作用 文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
     <title><script><style><link><meta>
    <title>标签 在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title
     
     
    html代码注释方法  <!..........>
    语义化的意思:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。
     
    语义化的好处:1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。
     <body>标签,网页上显示的内容放在这里
     <em>把文本定义为强调的内容。(默认斜体)
    <strong>把文本定义为语气更强的强调的内容。(默认加粗)
    <hx>标签 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
    <span>标签为文字设置单独样式 <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
    <q>(quote)标签,短文本引用  注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。(这里感觉可以体现出语义化的特点)
    <blockquote>标签,长文本引用  
    <br> (branch)分行显示文本  需要加回车换行的地方加入<br /> 相当于回车
    注:没有闭合标签的标签被称作为空标签 想<br />这样的就是空标签 写法为<标签 />
    利用&nbsp(No-Break Space)不换行空格; 输入空格
    其他的空格标记还有 &ensp &emsp &thinsp &zwnj &zwj 详情请看:https://blog.csdn.net/weixin_42105932/article/details/80234320
     
    <hr>(horizontal)标签,添加水平横线 <hr /> 空标签
    <address>标签,为网页加入地址信息(语义化)
     <a href="网址">href Hypertext Reference   anchor
    <code>标签 加入一行代码 
    加入多行代码 使用<pre> 包围在 pre 元素中的文本通常会保留空格和换行符。
    使用ul(Unordered List),  ul-li是没有前后顺序的信息列表。
    使用ol(Ordered List),ol-li是有序的
    <div>标签的作用就相当于一个容器。
    <table>标签,网页上的表格   table、tbody、tr、th、td

    1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    2、<tbody>…</tbody>:如果不加<thead><tbody><tfoot> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

    3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

    4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    5、<th>…</th>:表格的头部的一个单元格,表格表头。

    6、表格中列的个数,取决于一行中数据单元格的个数。

    caption标签,为表格添加标题和摘要

    摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:<table summary="表格简介文本">

    使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。   anchor

    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>   Hypertext Reference

    在新建浏览器窗口中打开链接    <a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。

    <a href="目标网址" target="_blank">click here!</a>

    使用mailto在网页中链接Email地址

    <a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。

    如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

    <img>标签,为网页插入图片 <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

    src-source

    1、src:标识图像的位置;

    2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

    3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

    4、图像可以是GIF,PNG,JPEG格式的图像文件。

    与用户进行交互:使用表单标签 HTML表单(form)

    表单可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

    <form   method="传送方式"   action="服务器文件">

    1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

    2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    3.method 数据传送的方式(get/post)。

    注意:

    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息提交不到服务器)。

    2、method : post/get 

    post与get请求的区别:https://blog.csdn.net/fannnnnn/article/details/90414416 看不懂。。。。

    文本输入框、密码输入框

    <form>
       <input type="text/password" name="名称" value="文本" />
    </form>

    1、type:

       当type="text"时,输入框为文本输入框;

       当type="password"时, 输入框为密码输入框。

    2、name:为文本框命名,以备后台程序ASP 、PHP使用。

    3、value:为文本输入框设置默认值。(一般起到提示作用)

     

    文本域:当用户需要在表单中输入大段文字时,需要用到文本输入域。<textarea  rows="行数" cols="列数">文本</textarea>

    1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

    2cols :多行输入域的列数

    3rows :多行输入域的行数

    4、在<textarea></textarea>标签之间可以输入默认值

    html中有两种选择框,即单选框复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

    1、type:

       当 type="radio" 时,控件为单选框

       当 type="checkbox" 时,控件为复选框

    2、value:提交数据到服务器的值(后台程序PHP使用)

    3、name:为控件命名,以备后台程序 ASP、PHP 使用

    4、checked:当设置 checked="checked" 时,该选项被默认选中

    注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

    下拉列表框 它可以有效的节省网页空间。既可以单选、又可以多选  <option>

    1、value:

    2、selected="selected"

    设置selected="selected"属性,则该选项就被默认选中。

    <select>

    <option value="提交值1">选项1</option>

    <option value="提交值2">选项2</option>

    </select>

    下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击

     

    在表单中有两种按钮可以使用,分别为:提交按钮、重置

    提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮

    <input   type="submit" value="提交">  

    type:只有当type值设置为submit时,按钮才有提交作用

    value按钮上显示的文字

    重置按钮:重置表单信息到初始时的状态时

    <input type="reset" value="重置">

    type:只有当type值设置为reset时,按钮才有重置作用

    value按钮上显示的文字

     

    form表单中的label标签

    label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)

    <label for="控件id名称">  将label标签与一个表单控件相关连 (标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。)

     

    现在了解了html基本的知识 之后要继续学习

    本文资料来源:慕课网 https://www.imooc.com/learn/9/

  • 相关阅读:
    mysql安装遇到的坑
    git pull 、git fetch、 git clone
    MD markdown入门
    Libevent:8Bufferevents高级主题
    Libevent:6辅助函数以及类型
    Libevent:5events相关
    Libevent:4event loop
    Libevent:3创建event_base
    Libevent:2设置
    Libevent:1前言
  • 原文地址:https://www.cnblogs.com/57one/p/11309500.html
Copyright © 2011-2022 走看看