zoukankan      html  css  js  c++  java
  • HTML 基础 1

    1. 文件结构:
        HTML文件的固定结构:
        <html>
            <head>...</head>
            <body>...</body>
        </html>
        html是根标签
        head定义文档头部,包含: title, script, style, link, meta
        body是网页主要内容,包含:h1,h2-h6, p, a, img
    
    2. 认识head标签:
        <head>
            <title>...</title>         网页标题
            <meta>
            <link>
            <style>...</style>
            <script>...</script>
        </head>
    
    3. 语义化:
        明白每个标签的用途(在什么情况下我可以使用这个标签才合理)
            比如,网页上的文章的标题就可以用标题标签,
            网页上的各个栏目的栏目名称也可以使用标题标签。
            文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。
    
    4. 认识body标签:
        <p>段落文本</p>              有三段就放三个<p></p>
        <h1>标题文本</h1>            h1-h6共6个标题分级
        <em>斜体文本(强调)</em>    斜体文本内容
        <strong>粗体文本</strong>    粗体显示文本内容
        <span>单独样式文本</span>    没有语义的,它的应用就是为了 设置单独的格式用的
        <q>引用的文本</q>            引用的文本内容,会自动加上双引号
        <blockquote>大段引用</blockquote>    引用大段的文本内容,文本前后会加上缩进
        <br/>                        换行
        <hr/>                        水平横线
        &nbsp;                       空格
        <address>地址信息</address>  地址信息,通常用于公司地址显示
        <code>代码内容</code>        代码,通常是一行内
        <pre>多行代码</pre>          多行代码,你需要在网页中预显示格式时都可以使用它
        <ul>                         ul-li 列表信息,以圆点显示
          <li>信息1</li>
          <li>信息2</li>
           ......
        </ul>
        <ol>                         ol-li 列表信息,带上序号
           <li>信息</li>
           <li>信息</li>
           ......
        </ol>
        <div>排版内容<div>           排版中使用,相当于一个容器
                                     确定逻辑部分:逻辑部分是页面上相互关联的一组元素,如栏目版块
        <div id="版块名称">…</div>  div 带上ID号,使之更清晰
        <table>表格内容</table>      创建表格
            <caption>标题文本</caption>         为表格添加标题文本
            <tbody>...</tbody>       若加此标签后,表格会一次性显示出来(而非网页加载一点显示一点)
            <tr>表格一行</tr>        表格中的一行
            <td>表格单元格</td>      表格中的一个单元格
            <th>表格表头</th>        表格头部的一个单元格,表格表头
        <table summary="表格摘要">...</table>    为表格添加摘要,但不会被浏览器显示出来
        <a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a>    链接标签
            target="_blank"           网页将在新窗口中打开
            mailto:                   网页中邮件地址,可带多个参数
                mailto: 邮箱地址
                cc=     抄送地址
                bcc=    密抄地址
                ;       多个邮箱地址
                subject=邮件主题
                body=   邮件内容
            完整举例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主题 &body=邮件内容">发送邮件</a>
        <img scr="图片地址" alt="下载失败时替换文本" title="提示文本" />
    
    5. 与用户交互:
        语法:
            <form method="传送方式" action="服务器文件"></form>
        举例:
            <form    method="post"   action="save.php">
                <label for="username">用户名:</label>
                <input type="text" name="username" />
                <label for="pass">密码:</label>
                <input type="password" name="pass" />
            </form>
        表单控件:
            文本框、文本域、按钮、单选框、复选框
        method:
            post/get
        1. 文本框(文本/密码)
            <form>
               <input type="text/password" name="名称" value="文本" />
            </form>
            type:有“text”和“password”两种类型
            name:为文本框命名,方便后台ASP和PHP使用
            value:文本框默认值,一般起提示作用
        2. 文本域(多行文本)
            <textarea rows="行数" cols="列数">默认文本内容</textarea>
            cols:多行输入域的列数
            rows:多行输入域的行数
        3. 单选框、复选框
            <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
            type:radio单选,checkbox复选框
            value:提交数据到服务器的值,后台PHP处理使用
            name:为控件命名,以备后台程序ASP和PHP使用
            checked:checked="checked"时,此选项默认被选中
            注意:同一组的单选按钮,name取值一定要一致
        4. 下拉列表框
            <form action="save.php" method="post" >
                <label>爱好:</label>
                <select multiple="multiple">
                  <label for="book>看书</label>        
                  <option value="看书" id="book">看书</option>
                  <option value="旅游">旅游</option>
                  <option value="运动">运动</option>
                  <option value="购物">购物</option>
                </select>
                <input   type="submit"   value="提交">
                <input   type="reset"    value="重置"  />
            </form>
            value:向服务器提交值
            selected:设置selected="selected"时,默认选中
            multiple:multiple="multiple"时,可以使用Ctrl多选,但很丑
            label:为了改进鼠标易用性,鼠标点击文本时,选择上Radio
    
    
  • 相关阅读:
    CalcIntegerLength
    ReadIniTest_GetPrivateProfileString
    map test
    逻辑判断
    AppDomain.Unload_MarshalByRefObject
    网络编程
    pymysql
    MySQL多表查询
    MySQL单表查询
    python3 中引用 HTMLTestRunner.py 模块的注意事项
  • 原文地址:https://www.cnblogs.com/viven/p/4299668.html
Copyright © 2011-2022 走看看