• 2天学的html(菜鸟一个,不喜勿喷,谢谢)


    html:超文本标记语言,用力描述网页的一种语言。(标记语言)
    网页是由网页元素组成,这些元素是利用html标签描述出来的,然后通过浏览器解析显示给用户。
    web标准:w3c(万维网联盟)国际最著名标准化组织。结构(structure):html、表现(presentat):CSS、行为(behavior):JavaScript


    HTML语法规范:
    1、HTML标签是由尖括号包围的关键词
    2、Html标签通常是承兑出现的,我们称为双标签,第一个是开始标签,第二个是结束标签。
    3、有些特殊的标签必须是单个标签(极少情况),<br/>,称为单标签
    标签关系:包含关系<head>和<title>,并列关系<head>和<body>

    html基本结构标签:
    <html>html标签---页面中最大的标签我们称之为根标签
    <head>文档的头部---注意在head标签中我们需要设置的标签是title
    <title>文档的标题---让页面拥有一个属于自己的页面标题
    <body>文档的主体---元素包含文档的所有内容,页面内容基本都是放到body里面的
    <!DOCTYPE>文档类型声明标签,告诉浏览器使用那个版本的HTML
    <html lang="">---定义当前文档显示的语言 en定义语言为英语,zh-CN定义语言为中文网页
    <mata charset="UTF-8"/>万国码---不写可能乱码

    html常用标签:
    <h1>-<h6>-----<h1>为一级标签,作为标题使用,根据重要性递减。特点:加了标题的文字会变的加粗,字号也会依次变大。一个标题独占一行。
    <p>---作为段落标签,特点,在一个段落中会根据浏览器窗口大小自动换行,段落和段落之间保有空隙。
    <br/>---单标签,强制换行标签,中间没有空隙
    <div>---是没有语义的,就是一个大盒子,用来装内容,表示分割,分区一行只能有一个div标签
    <span>---是没有语义的,就是一个小盒子,用来装内容,意为跨度,跨距,一行有多个
    图像标签<img src=""/>---单标签,src是<img>的必须属性,它用于指定图像文件的路径和文件名。所属属性:简单理解就是属于这个图像标签的特性。属性:alt---图像显示不出来的时候用文字显示出来
    title---提示文本,鼠标放到图像上,提示的文字
    width---设置图像的宽度(px)
    height---设置图像高度(px)
    border---设置图像的边框(px)---必须卸载标签名的后面,不分前后顺序用空格隔开,采取键值对的格式。
    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>---超链接,href必须属性 target _self为默认值,当前窗口打开页面,_blank为新窗口打开方式
    分类:外部链接<a href = "http://外部链接">文本或图像</a>

    图像标签和路径:
    目录文件夹:就是普通文件夹,里面不过存放了我们做页面所需要的相关素材,比如html文件、图片等。
    根目录:打开目录文件夹的第一层就是根目录。
    路径:
    绝对路径:在电脑中的位置""
    相对路径:以引用文件所在位置作为参考,而建立的目录路径
    同一级路径 <img src="文件名"/>、
    下一级路径 / <img src="文件夹名/文件名"/>
    上一级路径 ../ <img src="../文件名"/>
    图片相对于html的位置


    文本格式化标签:
    <strong></strong>或者<b></b>---加粗
    <em></em>或者<i></i>---倾斜
    <del></del>或者<s></s>---删除线
    <ins></ins>或者<u></u>---下划线
    均推荐使用前者。

    特殊字符:
    空格:&nbsp;
    大于号:&lt;
    小于号:&gt;

    表格标签:
    <table>定义表格标签
    <tr>定义表格中的行,必须嵌套在<table>中
    <td>定义表格中的单元格必须嵌套在<tr>中
    <th>定义表格中的表头单元格,里面文字会居中加粗,嵌套在<tr>中
    表格属性:写在table中
    align---left,center,right 规定表格相对周围元素的对齐方式
    boder---1或“”默认“”没有边框
    cellpadding---文字距离单元格边框之间的距离默认1
    cellspacing---单元格与单元格之间的空隙默认2
    width(height)---宽度
    表格结构标签:
    <thead>---表格头部区域
    <tbody>---表格主体区域
    合并单元格:
    1、先确定是跨行还是跨列合并。
    2、找到目标单元格,写上合并方式=合并单元格数量
    3、删除多余单元格。
    (跨行合并:rowsapn="合并单元格个数"---目标单元格为最上侧单元格为目标单元格,写合并代码
    跨列合并:colspan=”合并单元格个数“---目标单元格为最左侧单元格为目标单元格写合并代码)

    列表标签:(布局)
    无序列表:
    <ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    </ul>
    ---无序列表各个列表之间没有顺序之分,只能嵌套<li>标签,<li>之间可以容纳所有元素。
    有序列表:
    <ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    </ol>
    自定义列表:
    <dl>
    <dt>名词</dt>
    <dd>名词解释</dd>
    <dd>名词解释</dd>
    </dl>

    表单标签
    表单是由表单域,表单控件(也称表单元素)和提示信息三个部分构成
    表单域:包含表单元素的区域
    <form>标签用于定义表单域,会把它范围内的表单元素提示信息交给服务器
    <form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
    </form>
    action---url地址,用于指定接收并处理表单数据的服务器程序的url地址。
    method---get/post 用于设置表单数据的提交方式
    name---名称,用于指定表单的名称,以区分同一个页面中的多个表单域。
    input输入表单元素<input type="属性值"/>单标签用于指定不同的控件类型
    type属性的属性值:
    {text---文本框
    password---定义密码字段
    radio---定义单选按钮,可以实现多选一
    checkbox---定义多选按钮,可以实现多选多}

    name---由用户自定义,定义input元素的名称,要求单选按钮和复选框要有相同的name值
    value---由用户自定义,定义input元素名称
    checked---单选按钮和复选框可设置checked属性,当打开的时候就可以默认选中这个按钮。checked=checked
    maxlength---规定输入字段中的字符的最大长度
    submit---定义提交按钮,会把表单数据发送到服务器
    reset---可以还原表单元素的默认状态
    button---点击按钮
    file--文件域,上传文件使用

    label标签---用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器会自动将焦点(光标)转到对应表单元素上,用来增加用户体验
    语法:<label for="sex"> 男</label>
    <input type="radio" name="sex" id="sex"/>

    select下拉表单元素---有多个选项供用户选择
    语法格式:
    <select>
    <option>选项</option>
    <option>选项</option>
    <option>选项</option>
    </select>
    select 至少包含一对<option>;<option>中定义selected = “selected"时,当前选项即为默认选中项。

    textarea文本域元素---当用户输入内容较多的情况下
    语法:
    <textarea row="3" cols="20">
    文本内容
    </texxtarea>

  • 相关阅读:
    linux常用脚本
    shell学习笔记
    Linux常用命令List
    Centos7部署Zabbix
    centos7安装nagios步骤
    nagios报错HTTP WARNING: HTTP/1.1 403 Forbidden解决方法
    U盘安装CentOS7
    Thread线程控制之sleep、join、setDaemon方法的用处
    EfficientDet框架详解 | 目前最高最快最小模型,可扩缩且高效的目标检测(附源码下载)
    ubuntu18.04 安装多版本cuda ,原来版本为9.0,在新增8.0
  • 原文地址:https://www.cnblogs.com/rhy2103/p/13823280.html
Copyright © 2020-2023  润新知