当前位置: 首页 > news >正文

没有域名可以先做网站吗广州seo工资

没有域名可以先做网站吗,广州seo工资,现在asp做网站,产品备案号查询平台官网文章目录 一.HTML基本框架二.标题标签三.段落标签四.换行与水平线标签五.文本格式化标签(加粗、倾斜、下划线、删除线)六.图像标签扩展:相对路径,绝对路径与在线网址 七.超链接标签八.音频标签九.视频标签十.列表标签十一.表格标签扩展:表格结构标签合并…

文章目录

  • 一.HTML基本框架
  • 二.标题标签
  • 三.段落标签
  • 四.换行与水平线标签
  • 五.文本格式化标签(加粗、倾斜、下划线、删除线)
  • 六.图像标签
    • 扩展:相对路径,绝对路径与在线网址
  • 七.超链接标签
  • 八.音频标签
  • 九.视频标签
  • 十.列表标签
  • 十一.表格标签
    • 扩展:表格结构标签
    • 合并单元格
  • 十二.表单标签
    • 1.input标签
      • input占位文本属性(提示信息)
      • 单选框radio属性
      • 表单如何上传多个文件?
      • 多选框checkbox属性
    • 2.下拉菜单
    • 3.文本域
    • 4.label标签
    • 4.按钮
  • 十三.布局标签(div和span)
  • 十四.字符实体(空格,大于小于符号)

使用环境

  • VS Code编译器
  • 浏览器(谷歌或Microsoft Edge)

注释

  • 注释标签: < !-- … – >
  • VsCode注释快捷键: Ctrl + /

一.HTML基本框架

如何快速生成VS Code基本框架:在VS Code中输入’!'并回车生成一个HTML基本骨架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
  • html:整个网页
  • head:网页头部,存放给浏览器看的代码,例如CSS
  • body:网页主体,存放给用户看的代码,例如图片、文字等
  • title:网页标题

二.标题标签

  • 标签名: h1~h6(双标签)
  • 显示特点:文字加粗,且标签数字越大,标题的文字大小越小;一个标题标签独占一行;
  • 注意:h1标签在一个网页中只能用一次,而h2~h6标签没有使用次数的限制

代码示例

    <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

结果展示:

三.段落标签

标签名:p(双标签)
显示特点:独占一行;段落之间存在间隙

代码示例

    <p>我我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我</p><p>你你你你你你你你你</p><p>她她她她她她她她她她她她她她她她她她她</p>

运行结果:

四.换行与水平线标签

  • 换行:br(单标签)
  • 水平线:hr (单标签)

代码示例

<body><h1>这里展示换行与水平线标签</h1><hr>第一行内容<br>第二行内容<br>第三行内容
</body>

运行结果:

五.文本格式化标签(加粗、倾斜、下划线、删除线)

  • 加粗:strong或b
  • 倾斜:em或i
  • 下划线:ins或u
  • 删除线:del或s

代码示例

<body><h1>这里展示文本格式化标签</h1><strong>加粗标签</strong><b>加粗标签</b><br><em>倾斜标签</em><i>倾斜标签</i><br><ins>下划线标签</ins><u>下划线标签</u><br><del>删除线标签</del><s>删除线标签</s>
</body>

结果展示:

六.图像标签

  • 作用:在网页中插入图片
  • 语法:< img src = “图片的URL” >

src用于指定图像的位置和名称,是img的必须属性

代码示例

<body><h1>这里展示图片的标签</h1><br><img src="./map.jpg" alt="">    <!--这里用的是相对路径-->
</body>

运行结果:

常用属性

扩展:相对路径,绝对路径与在线网址

  • 相对路径:从当前文件位置出发查找目标文件
  • 绝对路径:从盘符出发查找目标文件
  • 在线网址:路径为网址的形式
相对路径:./map.jpg
绝对路径:C:\imges\map.jpg
在线网址:src="https://www.baidu.com/images/logo.png"

七.超链接标签

  • 作用:跳转到其他页面
  • 标签名:a(双标签)
  • 必须属性:href-跳转地址

开发时,如果不知道超链接的跳转地址,则href属性值写#,表示空链接,点击不会跳转

默认是点击链接在当前页面打开网址,如果想新建页面打开网址,则需要添加属性 target=“_blank”

代码示例

<body><h1>这里展示超链接跳转标签</h1><a href="https://www.baidu.com">点击我跳转到百度</a>
</body>

八.音频标签

  • 标签名:audio(双标签)

常用属性

属性作用说明
src(必须属性)音频URL支持格式:MP3,Ogg,Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放通常禁用

代码示例

<audio src="./music.mp3" controls loop autoplay></audio>

运行结果

九.视频标签

  • 标签名:video(双标签)

常用属性

属性作用说明
src(必须属性)视频URL支持格式:MP4,WebM,Ogg
controls显示视频控制面板
loop循环播放
muted静音播放
autoplay自动播放

代码示例

<video src="./music.mp4" controls loop autoplay></video>

十.列表标签

  • 列表的分类:无序列表,有序列表,定义列表
  • 无序列表标签:ul嵌套li,ul是无序列表,li是列表条目。ul标签里面只能包含li标签,li标签里面可以包裹任何内容
  • 有序列表标签:ol嵌套li,ol是有序列表,li是列表条目。ol标签里面只能包含li标签,li标签里面可以包裹任何内容
  • 定义列表标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述。dl里面只能包含dt和dd,dt和dd可以包含任何内容

代码示例

<body><h2>展示无序列表</h2><ul><li>第一项</li><li>第二项</li><li>第三项</li></ul><h2>展示有序列表</h2><ul><ol>第一项</ol><ol>第二项</ol><ol>第三项</ol></ul><h2>展示定义列表</h2><dl><dt>列表标题</dt><dd>第一项</dd><dd>第二项</dd><dd>第三项</dd><dt>第二标题</dt><dd>第一项</dd><dd>第二项</dd><dd>第三项</dd></dl>
</body>

运行结果:

十一.表格标签

语法:table嵌套tr,tr嵌套td/th

标签名说明
table表格
tr
th表头单元格
td内容单元格

表格默认没有边框线,加属性border添加边框线

代码示例

<body><h2>展示表格(不加边框线)</h2><table><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></table><h2>展示表格(加边框线)</h2><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></table>   
</body>

运行结果:

扩展:表格结构标签

作用:用表格结构标签把内容划分区域,便于代码开发,展示给用户看的部分不变

标签名含义
thead表格头部
tbody表格主体
tfoot表格底部

代码展示

<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table></body>

用户看到的表格结果不变

合并单元格

将多个单元格合并成一个单元格,以合并同类信息。
可以跨行合并,也可以跨列合并

  • 跨行合并,保留最上单元格,添加属性rowspan
  • 跨列合并,保留最左单元格,添加属性colspan
  • ** rowspan和colspan的属性值是数值,为合并单元格的个数**

代码示例

<body><h2>展示跨行合并单元格</h2><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table><h2>展示跨列合并单元格</h2><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="3">全市第一</td><!-- <td>全市第一</td><td>全市第一</td> --></tr></tfoot></table></body>

运行结果:

十二.表单标签

1.input标签

input标签的type属性值总结

type属性值说明特点
text文本框,输入单行文本输入什么就显示什么
password密码框输入什么都是以点的形式显示
radio单选框
checkbox多选框
file上传文件

代码展示

    <h2>展示input标签</h2>文本框 <input type="text"><br>密码框 <input type="password"><br> 单选框 <input type="radio"><br>多选框 <input type="checkbox"><br>上传文件 <input type="file">

input占位文本属性(提示信息)

  • 属性 placeholder
  • 属性值:提示信息

代码展示

    <h2>展示input的占位属性值</h2>文本框 <input type="text" placeholder="这是一个文本框"><br>密码框 <input type="password" placeholder="这是一个密码框">

单选框radio属性

属性值总结

属性名作用说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词

代码示例

    <h2>展示redio属性值</h2><br> 性别 <input type="radio" name="gender"><input type="radio" name="gender" checked>

表单如何上传多个文件?

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能

代码示例

    <h2>展示上传多个文件</h2><br> 上传文件 <input type="file" multiple> 

多选框checkbox属性

  • 默认选中添加属性:checked

代码示例

    <h2>展示多选框的默认选中</h2><br> 我姓:<input type="checkbox"><input type="checkbox" checked><input type="checkbox">

2.下拉菜单

语法总结:select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项

默认选择属性:selected

代码示例

    <h2>展示下拉菜单</h2>请选择你所在的城市<select><option selected>北京</option><option>上海</option><option>广州</option><option>深圳</option><option>武汉</option></select>

3.文本域

  • 作用:多行输入文本等待表单控件

  • 标签:textarea, 双标签

代码示例

    <h2>展示文本域标签</h2><textarea name="" id="" cols="30" rows="10">输入评论</textarea>

4.label标签

  • 作用:网页中,某个标签的说明文本。或用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。

  • 如何使用label标签增大点击范围?:①设置label标签的for属性值和表单控件的id属性值相同 ②使用label标签包裹文字和表单控件

  • 支持文本框,密码框,上传文件,单选框,多选框,下拉菜单,文本域等增大点击范围

代码示例

    <h2>展示label标签增大点击范围</h2>性别 <input type="radio" name="gender" id="man"> <label for="man"></label><input type="radio" name="gender" checked>

4.按钮

  • 标签:button(双标签)

  • 表单控件用form标签管理,按钮才有对应的实际效果

如果botton标签省略type属性,则默认功能为提交

type属性值总结

type属性值说明
submit提交按钮,点击后可以提交数据到后台(默认功能)
reset重置按钮,点击后将表单控件恢复默认值
button普通按钮,默认没有功能,一般配合JS使用

代码展示

    <h2>表单按钮标签</h2><!-- action是发送数据的地址,即要把数据提交到哪的位置 --><form action="">用户名:<input type="text"> <br><br>密码:<input type="password"> <br><br><button type="submit">提交</button><button type="reset">重置</button></form>

十三.布局标签(div和span)

  • 作用:布局网页(划分网页区域)

  • div:独占一行,双标签

  • span:不换行,双标签

代码示例

  <div>这是div标签,独占一行</div><span>这是不换行的span标签</span>

十四.字符实体(空格,大于小于符号)

  • 作用:在网页中显示预留字符
显示结果描述实体名称
空格& nbsp
<小于符号& lt
>大于符号& gt

代码示例

    <h2>展示HTML中的字符实体</h2>这里是展示字符实体,&nbsp;&nbsp;打两个空格。&nbsp;&nbsp;&nbsp;打三个空格。<br>画一个小于符号:&lt;<br>画一个大于符号:&gt;

http://www.ritt.cn/news/15439.html

相关文章:

  • vs2008 手机网站开发安装百度一下
  • 泰安网站制作淘宝推广公司
  • 外贸网站和企业网站抖音关键词优化排名
  • 网站制图软件seo常用工具网站
  • 技成培训网官方网站外贸推广平台有哪几个
  • 有多少收费网站网域名查询地址
  • 个人免费网站建站关键词信息流广告投放平台
  • 购物网站排名榜优化seo系统
  • 现在pc网站的标准一般是做多大除了百度指数还有哪些指数
  • 0317网站建设网络公司主要做哪些
  • 注册公司做网站googlechrome浏览器
  • 做同城网站还有机会吗企业品牌推广方案
  • 光明网站建设网站seo案例
  • 我想建设网站广告营销的经典案例
  • 徐州网站建设服务今日军事新闻
  • 网站的交互怎么做游戏推广公司靠谱吗
  • bc网站开发百度最贵关键词排名
  • 南高齿网站是谁做的seo入门到精通
  • 做网站网页的公司关键词推广优化排名如何
  • 做钢材生意一般做什么网站好杭州seo排名优化外包
  • 做房产买卖哪些网站可以获客连云港百度推广总代理
  • 莱芜哪里做网站手机百度最新正版下载
  • 做一个app成本网站seo专员
  • 网站icp备案申请怎么在百度上推广
  • 网站后台代码如何做制作网站教学
  • 合肥百度 网站建设百度网站推广
  • 腾讯云网站建设的步骤过程百度手机网页
  • 做微信网站支付需要什么信息表网络营销课程实训总结
  • 别人不能注册我的wordpress站精准的搜索引擎优化
  • 上海云职企业服务是干什么的seo查询源码