zoukankan      html  css  js  c++  java
  • Python-HTML基础

    1、HTML

    1、HTML是什么

     超文本标记语言,即学习这门语言就是在一堆标记

    2、为何要用?

    标记文本

    3、如何用?

    HTML标签就是用来做记号的,虽然这些记号自带一些样式,但务必忽略掉记号的样式,样式会专用用css来做

    HTML标签格式:
    标签/元素
    标签的语法:
    <标签名 属性名="属性值">包含的文本内容</标签名>
    <标签名 属性名="属性值" />

    只站在html角度,按照能否嵌套子标签,可以将标签分为两大类:
    容器类标签:可以嵌套任意其他类型的标签 比如:<div>和</div>
    文本类标签:只能嵌套文字、图片、超链接 比如:<br/>、<hr/>、<img src="1.jpg" />等。

    几个很重要的属性:
    id:定义标签的唯一ID,HTML文档树中唯一
    class:为html元素定义一个或多个类名(classname)(CSS样式类名)
    style:规定元素的行内样式(CSS样式)


    2. HTML文档结构

    最基本的HTML文档:
    <!DOCTYPE html> 声明为HTML5文档
    <html lang="zh-CN"> 是文档的开始标记和结束的标记。
    是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
    <head> 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
    <meta charset="UTF-8"> 对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码
    有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
    <title>css样式优先级</title> 定义了网页标题,在浏览器标题栏显示。
    </head>
    <body> 之间的文本是可见的网页主体内容。
    </body>
    </html>


    3. 常用标签

    1.head内常用标签

    <title></title> 定义网页标题
    <style></style> 定义内部样式表
    <script></script> 定义JS代码或引入外部JS文件
    <link/> 引入外部样式表文件
    <meta/> 定义网页原信息


    2 body内常用标签

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

    <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>


    2 特殊字符

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


    3 div标签和span标签

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


    4 img标签

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


    5 a标签

    href属性指定目标网页地址。该地址可以有几种类型:
    绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
    相对URL - 指当前站点中确切的路径(href="index.htm")
    锚URL - 指向页面中的锚(href="#top")
    <a href="http://www.oldboyedu.com" target="_blank" >点我</a>


    6 列表

    1.无序列表
    <ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
    </ul>
    type属性:
    disc(实心圆点,默认值)
    circle(空心圆圈)
    square(实心方块)
    none(无样式)
    2.有序列表
    <ol type="1" start="2">
    <li>第一项</li>
    <li>第二项</li>
    </ol>
    type属性:
    1 数字列表,默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马
    3.标题列表
    <dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    </dl>


    7 表格

    <table>
    <thead>
    <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Egon</td>
    <td>杠娘</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
    </tr>
    </tbody>
    </table>


    8 form

    功能:
    表单用于向服务器传输数据,从而实现用户与Web服务器的交互
    表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
    表单还可以包含textarea、select、fieldset和 label标签。
    表单属性 属性====>描述
    accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
    action 规定向何处提交表单的地址(URL)(提交页面)。
    autocomplete 规定浏览器应该自动完成表单(默认:开启)。
    enctype 规定被提交数据的编码(默认:url-encoded)。
    method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
    name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
    novalidate 规定浏览器不验证表单。
    target 规定 action 属性中地址的目标(默认:_self)。


    9 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和checkbox默认被选中的项
    readonly:text和password设置只读
    disabled:所有input均适用


    10 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:定义提交时的选项值

    REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/7988087.html


    11 label标签

    <form action="">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username">
    </form>

     html适配手机

    <head>

    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />

  • 相关阅读:
    Html.BeginForm())与Ajax.BeginForm()
    MVC5+EF6 (附加分页功能)
    display模版详细介绍
    vs2013创建mvc项目体系找不到指定文件
    MVC2、MVC3、MVC4、MVC5之间的区别 以及Entity Framework 6 Code First using MVC 5官方介绍教程
    windows下android开发环境搭建
    windows下android环境的搭建:完成后添加android其他版本
    免费提供各种编程语言视频教程资料!(福利!)
    AS无法连接手机,5037端口总被占用怎么办?
    Android基于bmob后端云实现数据读取
  • 原文地址:https://www.cnblogs.com/du-jun/p/10206211.html
Copyright © 2011-2022 走看看