zoukankan      html  css  js  c++  java
  • Web前端 --- HTML

    HTML

    超文本协议

    文件名的后缀

    文件的后缀是给人看的,对于计算机来说,全都是二进制,之所以不同的后缀名有不同的功能,是我们程序员自己人为的定制的

    注释是代码之母

    HTML的注释

    单行注释:

    多行注释:<!-- 多行注释(分行写) --->

    我们在搭建页面的时候,通常会利用注释来划分区域

    HTML常用标签

    #### 标签的分类1:*

    1.双标签(h1,title,head,body,style,i,s,u,p,a,div,span,ol,li,table,thead,tbody,tr,td,)

    2.自闭和标签(meta,scrip,link,br,hr,img)

    标签的分类2:

    1.块级标签 h1~h6 p br hr div

    独占一行,

    注意:

    (1).块儿级标签内可以嵌套其他块儿和行内标签

    (2).p标签虽然是块儿级标签,但是他的内部不能嵌套任何块儿级标签,只能嵌套行内标签

    2.行内标签 s i u b span

    内部文本多大,就占多大,行内不能嵌套行内和块

    标签通常有两个属性

    id 就类似于是身份证号,每一个标签都应该有id值,并且在同一个html文档中,标签的id不能重复

    class 类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式

    head内常用标签

    title:定义网页标题
    
    style:内部支持写css代码
    
    link:引入外部css样式文件
    
    script:内部可以直接写js代码,也可以引入外部js文件
    
    meta:定义网页源信息
    

    body内常用标签

    h1~h6  段落标题
    p      段落标签,一个p就是一行内容
    s      删除线
    b      加粗
    u      下划线
    i      斜体
    br     换行
    hr     一条分割线
    

    body内特殊符号

    &nbsp   空格
    &amp    &
    &yen    ¥
    &gt     >
    &lt     <
    &copy   ©
    &reg    ®
    

    body内重要的标签

    div 块儿标签   可以在这块区域内填写任何内容
    span  行内标签  内部文本有多少占多少
    

    body内链接标签

    a   
    跳转功能  
    <a href="https://www.sogo.com">点我点我</a>
    
    描点功能  
    <a href="" id="a1">文章开头</a>
    <a href="#a1">回到顶部</a>
    

    body内图片标签

    img
    <img src="11111.jpg" alt=""title="真好看">
    
    参数解释:
    src:向网页上展示图片的地址,也可以是url(网址)
    alt:当图片加载不出来的时候,展示的提示信息
    title:鼠标悬浮上去之后展示的提示信息
    width和height:宽度和高度,只设置一个的时候等比例缩放,两个一起设置会失帧
    

    body中的列表标签

    无序列表
    ul>li
    
    有序列表
    ol>li
    
    标题列表
    dl>dt  小标题,自动加粗
       dd  小章节
    

    body中的表格标签

    <table>
     	<thead>
     		<tr>   # 一个tr就是一行
    			<th>username</th>  # th会自动加粗
     			<th>password</th>
    			<th>hobby</th>
     			<th>is_delete</th>
    		</tr>  一个tr就表示一行
     	</thead>
    	<tbody>
    		<tr>
     			<td>jason</td>
     			<td>123</td>
     			<td>study</td>
     			<td>0</td>
     		</tr>
     	</tbody>
     </table>
    

    form表单

    能够获取用户输入(输入,选择,上传的文件)并将用户输入的内容全部发送给后端

    form的参数

    action:控制数据提交的地址

    1.不写,默认就是朝当前这个页面所在的地址提交数据

    2.写全路径(https://www.baidu.com

    3.只写路径后缀(/index/)

    通常情况下input需要结合label一起使用

    <label for="d1">用户名:<input type="text" id="d1"></label>
    

    绑定id值之后点击label标签内的任何位置都可以自动选中input框

    能够触发form表单提交数据的动作有两个标签

    1.input标签 type=submit

    2.button标签

    与后端进行交互,所有获取用户输入的标签,都应该有name属性

    1.name属性就类似于字典的key

    2.input框获取到的用户输入都会放到input框的value属性中

    3.针对选择框,传到后端的数据,由value属性决定

    4.form表单如果要提交文件数据,必须在form中修改一下属性

    enctype="multipart/form-data"
    
  • 相关阅读:
    正则表达式点滴
    异步处理与界面交互
    关于利用VS2008创建项目遇到的小困惑备忘
    using App.cofig to Store value
    Castle ActiveRecord学习笔记三:初始化配置
    无服务器端的UDP群聊功能剖析
    为VS2010默认模板添加版权信息
    理论有何用?不问“何用”,先问“用否”!
    微软没有公开的游标分页
    那些满脑子只考虑后台数据库的人他整天研究的就是针对自己查询一些数据的sql语句
  • 原文地址:https://www.cnblogs.com/whkzm/p/11852388.html
Copyright © 2011-2022 走看看