zoukankan      html  css  js  c++  java
  • day 42 前端HTML

    一 . HTML

      1 . HTML是一门超文本标记语言,用于创建网页的标记语言,本质上是浏览器可以识别的语言,HTML是一门标记语言,它不是一种编程语言,HTML使用标签来描述网页,不像python编程语言一样,有逻辑什么的,这个标记语言是没有逻辑的,多敲多练多记多背就行了。

      HTML最基本的文本结构:

      

    <!DOCTYPE html>   # 声明为HTML5文档
    <html lang="zh-CN">   #这个lang表示语言,zh-CN是中文的意思,就是说,你整个文档的内容以中文为主,如果以英文为主,就写成lang='en'
    <head> # 最开始的部分 <meta charset="UTF-8"> #字符集是UTF-8 ,有些网站是gbk,要观察仔细不要乱码 <title>css样式优先级</title> # 标题 </head> # 到这里结束标题 <body> # 主要内容部分开头 </body> # 主要内容结束 </html> # HTML文档结束收尾

    HTML标签有些是成对出现的,比如<div>和</div>
    也有一些是单独呈现的,比如<br/>,<hr/>,<img src="1.jpg"/>等
      2.两个常用的到的标签:

    <div> :块级标签,没有实际意义。通过CSS样式赋予不同的表现,
       <span> : 内联标签,也没有实际意义,通过CSS样式赋予不同的表现,
       两个标签嵌套只能用块级标嵌套内联标签,内联标签不能在外面,外部可以引入多个块级标签相同嵌套。

      3.head常用标签

       

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

      meta标签有http-equiv属性和name属性

         http-equiv相当于http文件头作用,它向浏览器传一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值content,传递参数变量值。

      name用于描述网页,对应的属性值是content,传递参数变量值。

      4.body内常用标签(块级标签和内联标签)

    不加标签的纯文字也是可以在body中写的
    <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> #就是单独个一个水平线
    每次加上一些内容,别忘了刷新一下页面,才能看到新添加的效果或者内容,其实上面这些标签很少用

    5.img标签和a标签
     
      img 用来打开图片路径,图片未加载成功的提示,设置高和宽还有鼠标悬浮时的信息。
      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属性: start是从数字几开始

    • 1 数字列表,默认值
    • A 大写字母
    • a 小写字母
    • Ⅰ大写罗马
    • ⅰ小写罗马

        3.标题列表(就像大纲一样,有一个层级效果)

    复制代码
    <dl>
      <dt>标题1</dt>
      <dd>内容1</dd>
      <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
    </dl>  
      7.表格
      表格最重要的目的就是显示表格类的数据,按表格的形式再在网页上面给你打开
      
    <table border='1'>
      <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>

    !!还有input标签和from标签都去敲一下
      https://www.cnblogs.com/clschao/articles/10077261.html
      
  • 相关阅读:
    课程教学网站(大三上课设)
    mybatis+servlet
    第一个struct2(Hello_World)
    servlet入门
    mybatis入门项目
    XML
    状态模式的介绍及状态机模型的函数库javascript-state-machine的用法和源码解析
    10个JavaScript难点
    markdown基本语法
    Mac OSX 平台安装 MongoDB
  • 原文地址:https://www.cnblogs.com/liuteacher/p/10114375.html
Copyright © 2011-2022 走看看