继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

转同学的html前端学习手记

慕粉3407343
关注TA
已关注
手记 1
粉丝 0
获赞 55
  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/> 水平横线
      空格
    <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="列数">默认文本内容
打开App,阅读手记
9人推荐
发表评论
随时随地看视频慕课网APP