html基础

html基础,第1张

目录

骨架

标题标签与文本格式化标签

段落标签

图像标签

超链接标签

内部链接

外部链接

锚点标签

表格标签

基本用法

表头单元格标签

表格属性

表结构标签

合并单元格

列表标签

无序列表

有序标签

自定义标签

表单标签

select标签

文本域标签


整理防止忘记篇

骨架

常用编写html的工具是vs code,在vscode中创建html文件后按感叹号可以直接出现html的骨架




    
    
    
    Document


    

声明标签 告诉我们是以html显示

告诉我们这是有关英文网站,但是在里面我们可以写中文英文,显示的时候回显示我们所写的语言

chaeset = 字符编码,很恶心的东西

所有的标签都是有始有终的 即前面有一个什么,后面就会有一个/什么

标题标签与文本格式化标签
标题标签与文本格式化标签

    我是加粗的文字
    我是加粗的文字
    我是倾斜的文字
    我是倾斜的文字
    我是删除线

从1到6重要性依次递减
段落标签

hxiaogang

hxiaogangzuishuai

段落标签可以把文章分成不同段落,段落和段落之间会有空隙 换行标签
单标签,简单的开始新的一行,与段落标签不同,分开后没有空隙
图像标签

用这样的代码可以将图片直接插入进去,scr之后的图像路径可以是相对路径也可以是绝对路径

图像属性(可以用key="values"的形式)
如果加了alt="",在图片不存在或者路径输错时,回用后面的文字替换
    
如果后面加了title="",在鼠标指向网页的图片上时,鼠标上会显示后面的内容
    
图像标签后面还可以加上以下来调整图片
width 图像宽度
height 图像高度
border 图像边框粗细
超链接标签 内部链接
外部链接
详细请点击
这样可以连接到外部的网站
里面的target属性,如果里面是_blank则你点击你的超链接以后是新打开你跳转的页面
如果里面是_self则是当前页面直接跳转,默认值是_self
外部链接
内部链接
页面源代码
注意如果你要超链接的文件是在当前目录下则直接可以输入文件名,如果在上一级可以用../,但如果跟你的文件夹没有任何关系得使用绝对路径
锚点标签
锚点标签指在同一页面跳转,假如你要查看hxiaogang的早年经历,在目录中点击早年经历,就会定位到底下详细的内容
你先要在目录中就要加入这样的超链接,并且要在href=后面加一个#,并且要自定义一个标题,例如jinli

在后面的主要文字叙述下也要写入id并且id要与定义的href相同
早年经历
早年经历

超链接标签不止可以是网页元素,还可以是文本,图像,表格,音频,视频都可以

如果href里面的地址是一个文件或者压缩包,则会下载这个文件

表格标签 基本用法

    
单元格内文字 单元格内文字
表头单元格标签

    
                   ...
        
单元格内文字
表格属性


align 规定元素的对其方式 center left right
border 是否拥有边框   1或""
cellpadding 内容与边框间空白的大小
cellspacing  单元格之间的空白
width 表格宽度 
表结构标签 
将表格的表头放到里面 将表格的主题放入 合并单元格
1.先确定是跨行还是跨列
2.找到目标单元格,写上合并方式="合并单元格的数量"  
3.删除多余的单元格

跨行合并 rowspan="合并单元格的格数"
跨列合并 colspan="合并单元格的格数"
列表标签 无序列表

    你喜欢的食物
    
        liulian
        choudoufu
    

li标签必须放到ul标签里

li标签里只能放li标签

无序标签没有顺序之分

有序标签

    fensipaihangbang
    
        hu 300
        hu 100
    

有序标签会自动加上顺序,但在实际使用时通常使用css

自定义标签

    名词1
    名词1解释2
    名词2解释2

中只能包含

没有个数限制,一个对应多个

表单标签

    用户名:  
密码:
性别: 男
爱好:喝酒 干饭打麻将


上传头像

查看输出效果

select标签

出现下拉菜单


    籍贯:
    
文本域标签

输入多文字


    
        备注:
        
    

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1321670.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)